Next.js Discord

Discord Forum

Type error: Type 'Props' does not satisfy the constraint 'PageProps'

Answered
Donald Louch posted this in #help-forum
Open in Discord
Avatar
Donald LouchOP
I'm trying to deploy my latest code on Vercel but I keep getting this error:
Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Error: Command "npm run build" exited with 1

I have tried to refactor the page and even move things around but I still get this message. I even stripped out the { params }: Props part of the page and then it failed again on another page. Thus, it seems to be any page that I have my parms passed down?!

// Some page.tsx file
type Props = {
    params: { slug: string }
}

export default async function FUNCTIONNAME({ params }: Props) {
  const { slug } = params
  const {data } = await SOMEFETCHFUNCTION
  return <CLIENTCOMP data={data} />
}
Answered by Donald Louch
So the solution is:
type Params = Promise<{ slug: string }>

export default async function FUNCTIONNAME({ params }: { params: Params }) {
  const { slug } = await params
  const {data } = await SOMEFETCHFUNCTION
  return <CLIENTCOMP data={data} />
}

Thank you for your help @Arinji!
View full answer

15 Replies

Avatar
Arinji
are you on nextjs 15 rc2?
@Donald Louch
Avatar
Donald LouchOP
Correct!
Avatar
Arinji
its a breaking change where params and stuff are now promises
https://nextjs.org/blog/next-15-rc2#async-request-apis-breaking-change
https://nextjs.org/docs/canary/app/building-your-application/upgrading/version-15#asynchronous-page
Avatar
Donald LouchOP
Okay thank you, I have ran npx @next/codemod@canary next-async-request-api . and now just wait for a new deploy! I'll let you know if that worked!
Avatar
Arinji
sure, if it did mark a solution :D
like this
Avatar
Donald LouchOP
Sadly the codemod didn't fix it; but the changes described in the upgrade guide did work; or atleast it appears it will! I've tried out with one file now have to go through all the files!
Avatar
Arinji
i dont trust codemods anyways
xD
but yea, nice to know it works :D
mark a solution :DD
Avatar
Donald LouchOP
So the solution is:
type Params = Promise<{ slug: string }>

export default async function FUNCTIONNAME({ params }: { params: Params }) {
  const { slug } = await params
  const {data } = await SOMEFETCHFUNCTION
  return <CLIENTCOMP data={data} />
}

Thank you for your help @Arinji!
Answer