nextjs type_error ai_generated true

Error: Route "[param]" has invalid parameter type. Parameters must be strings or arrays of strings, but received number.

ID: nextjs/invalid-app-path-param-type

Also available as: JSON · Markdown · 中文
90%Fix Rate
86%Confidence
1Evidence
2023-09-05First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 13.x active — — —
Next.js 14.x active — — —
Next.js 15.x active — — —

Root Cause

In dynamic routes (e.g., app/[slug]/page.tsx), the generateStaticParams function or the params object from the route returns a non-string value (e.g., number) for a parameter that Next.js expects to be a string.

generic

中文

在动态路由（例如 app/[slug]/page.tsx）中，generateStaticParams 函数或来自路由的 params 对象为参数返回了非字符串值（例如数字），而 Next.js 期望该参数是字符串。

Official Documentation

https://nextjs.org/docs/app/api-reference/functions/generate-static-params

Workarounds

  1. 95% success Ensure generateStaticParams returns params as strings. Use String() or template literals to convert numbers. 
    Ensure generateStaticParams returns params as strings. Use String() or template literals to convert numbers.
  2. 90% success Add TypeScript validation to ensure params are strings. Use a type guard or runtime check in the page component. 
    Add TypeScript validation to ensure params are strings. Use a type guard or runtime check in the page component.

中文步骤

  1. Ensure generateStaticParams returns params as strings. Use String() or template literals to convert numbers.
  2. Add TypeScript validation to ensure params are strings. Use a type guard or runtime check in the page component.

Dead Ends

Common approaches that don't work:

  1. 90% fail

    Next.js requires params to be strings for URL construction; numbers cause type errors.

  2. 60% fail

    TypeScript and runtime validation will throw an error if the value is not a string or array of strings.

  3. 80% fail

    The build will fail (if using static generation) or the route will not match correctly at runtime.