From c91d7ea98619c9cd616d24219788c7593f7b0a48 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Mon, 3 Apr 2023 22:04:35 +0200
Subject: [PATCH 1/3] Check for null before reading value in useParams

---
 packages/next/src/client/components/navigation.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/client/components/navigation.ts b/packages/next/src/client/components/navigation.ts
index 3b53a1abd0b..3bf67995cc4 100644
--- a/packages/next/src/client/components/navigation.ts
+++ b/packages/next/src/client/components/navigation.ts
@@ -158,12 +158,12 @@ function getSelectedParams(
  */
 export function useParams(): Params {
   clientHookInServerComponentError('useParams')
-  const { tree } = useContext(GlobalLayoutRouterContext)
-  if (!tree) {
+  const globalLayoutRouterContext = useContext(GlobalLayoutRouterContext)
+  if (!globalLayoutRouterContext) {
     // This only happens in `pages`. Type is overwritten in navigation.d.ts
     return null!
   }
-  return getSelectedParams(tree)
+  return getSelectedParams(globalLayoutRouterContext.tree)
 }
 
 // TODO-APP: handle parallel routes

From ef7fe95a32a35ebe98eb7d15970d02f1c066697f Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Mon, 3 Apr 2023 22:09:07 +0200
Subject: [PATCH 2/3] Add test

---
 test/e2e/app-dir/use-params/pages/use-params-pages.js | 10 ++++++++++
 test/e2e/app-dir/use-params/use-params.test.ts        |  6 ++++++
 2 files changed, 16 insertions(+)
 create mode 100644 test/e2e/app-dir/use-params/pages/use-params-pages.js

diff --git a/test/e2e/app-dir/use-params/pages/use-params-pages.js b/test/e2e/app-dir/use-params/pages/use-params-pages.js
new file mode 100644
index 00000000000..c6ed8282316
--- /dev/null
+++ b/test/e2e/app-dir/use-params/pages/use-params-pages.js
@@ -0,0 +1,10 @@
+'use client'
+import { useParams } from 'next/navigation'
+export default function Page() {
+  const params = useParams()
+  return (
+    <div>
+      <div id="params">{JSON.stringify(params)}</div>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/use-params/use-params.test.ts b/test/e2e/app-dir/use-params/use-params.test.ts
index 2685137f102..36575d703e0 100644
--- a/test/e2e/app-dir/use-params/use-params.test.ts
+++ b/test/e2e/app-dir/use-params/use-params.test.ts
@@ -36,5 +36,11 @@ createNextDescribe(
       expect(await browser.elementByCss('#param-id').text()).toBe('a')
       expect(await browser.elementByCss('#param-id2').text()).toBe('b')
     })
+
+    it('should return null in pages', async () => {
+      const browser = await next.browser('/use-params-pages')
+
+      expect(await browser.elementByCss('#params').text()).toBe('null')
+    })
   }
 )

From ffe3b2257831cd2032743058dd6878d47a1170b7 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 5 Apr 2023 21:37:49 +0200
Subject: [PATCH 3/3] Handle null case

---
 test/e2e/app-dir/use-params/app/[id]/[id2]/page.tsx | 9 ++++++---
 test/e2e/app-dir/use-params/app/[id]/page.tsx       | 7 +++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/test/e2e/app-dir/use-params/app/[id]/[id2]/page.tsx b/test/e2e/app-dir/use-params/app/[id]/[id2]/page.tsx
index fddfc884181..119a1551be9 100644
--- a/test/e2e/app-dir/use-params/app/[id]/[id2]/page.tsx
+++ b/test/e2e/app-dir/use-params/app/[id]/[id2]/page.tsx
@@ -1,11 +1,14 @@
 'use client'
 import { useParams } from 'next/navigation'
 export default function Page() {
-  const { id, id2 } = useParams()
+  const params = useParams()
+  if (params === null) {
+    return null
+  }
   return (
     <div>
-      <div id="param-id">{id}</div>
-      <div id="param-id2">{id2}</div>
+      <div id="param-id">{params.id}</div>
+      <div id="param-id2">{params.id2}</div>
     </div>
   )
 }
diff --git a/test/e2e/app-dir/use-params/app/[id]/page.tsx b/test/e2e/app-dir/use-params/app/[id]/page.tsx
index 2f2455d1ca4..4b3b66b872e 100644
--- a/test/e2e/app-dir/use-params/app/[id]/page.tsx
+++ b/test/e2e/app-dir/use-params/app/[id]/page.tsx
@@ -1,10 +1,13 @@
 'use client'
 import { useParams } from 'next/navigation'
 export default function Page() {
-  const { id } = useParams()
+  const params = useParams()
+  if (params === null) {
+    return null
+  }
   return (
     <div>
-      <div id="param-id">{id}</div>
+      <div id="param-id">{params.id}</div>
     </div>
   )
 }