Next.js Discord

Discord Forum

Type error: Type 'PageParams' does not satisfy the constraint 'PageProps'.

Answered
Norwegian Forest Cat posted this in #help-forum
Open in Discord
Norwegian Forest CatOP
Error:

src/app/[...slug]/page.tsx
Type error: Type 'PageParams' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ slug?: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

See attached files for my code. Can someone help me out?
Answered by Yi Lon Ma
interface PageParams {
-  params: { slug?: string[] | string }
+  params: Promise<{ slug?: string[] | string }>
-  searchParams: Record<string, string>
+  searchParams: Promise<Record<string, string>>
}
View full answer

5 Replies

Yi Lon Ma
interface PageParams {
-  params: { slug?: string[] | string }
+  params: Promise<{ slug?: string[] | string }>
-  searchParams: Record<string, string>
+  searchParams: Promise<Record<string, string>>
}
Answer
@Yi Lon Ma diff interface PageParams { - params: { slug?: string[] | string } + params: Promise<{ slug?: string[] | string }> - searchParams: Record<string, string> + searchParams: Promise<Record<string, string>> }
Norwegian Forest CatOP
Thanks for your reply. Tried that already, but receive this error:


./src/lib/createPage.tsx:48:41
Type error: Property 'slug' does not exist on type 'Promise<{ slug?: string | string[]; }>'.

46 | }: PageParams): Promise<JSX.Element | null> {
47 | try {
48 | const slug = Array.isArray(params.slug)
| ^
49 | ? params.slug.join('/')
50 | : (params.slug ?? '')
51 | const uri = slug
Yi Lon Ma
yea since they're now promise, you need to do await params
same with searchParams
props:PageParams

const params = await props.params
const searchParams = await props.searchParams

// Use these 2 variables now instead of props.