Update useParams typing to assume a given shape (#55126)

Alternative to this is user code constantly doing things like `useParams() as { x: string }`.
vercel · Sep 14, 2023 · a94f5a5 · a94f5a5
1 parent 14145c8
commit a94f5a5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/next/navigation-types/compat/navigation.d.ts b/packages/next/navigation-types/compat/navigation.d.ts
@@ -25,5 +25,10 @@ declare module 'next/navigation' {
    *
    * If used from `pages/`, the hook will return `null`.
    */
-  export function useParams(): Record<string, string | string[]> | null
+  export function useParams<
+    T extends Record<string, string | string[]> = Record<
+      string,
+      string | string[]
+    >
+  >(): T | null
 }
diff --git a/packages/next/src/client/components/navigation.ts b/packages/next/src/client/components/navigation.ts
@@ -164,14 +164,14 @@ function getSelectedParams(
  * Get the current parameters. For example useParams() on /dashboard/[team]
  * where pathname is /dashboard/nextjs would return { team: 'nextjs' }
  */
-export function useParams(): Params {
+export function useParams<T extends Params = Params>(): T {
   clientHookInServerComponentError('useParams')
   const globalLayoutRouterContext = useContext(GlobalLayoutRouterContext)
   if (!globalLayoutRouterContext) {
     // This only happens in `pages`. Type is overwritten in navigation.d.ts
     return null!
   }
-  return getSelectedParams(globalLayoutRouterContext.tree)
+  return getSelectedParams(globalLayoutRouterContext.tree) as T
 }
 
 // TODO-APP: handle parallel routes