Type 'Props' does not satisfy the constraint 'PageProps' (generateMetadata)

[Dannymx]

Link to the code that reproduces this issue

https://github.com/Dannymx/shockinglemon.com/tree/develop

To Reproduce

• Clone
• run command 'check-types'
• Will error in any file that has generateMetadata with Props

Current vs. Expected behavior

Fails at validating types in generateMetadata methods.

Provide environment information

❯ npx --no-install next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:25 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.10.0
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: 15.0.1
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

TypeScript

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Only fails in my dynamic pages that generate Metadata info.

.next/types/app/band/[slug]/page.ts:34:29 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

34 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/band/[slug]/page.ts:38:31 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

38   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/blog/[slug]/page.ts:34:29 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

34 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/blog/[slug]/page.ts:38:31 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

38   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/music/[title]/page.ts:34:29 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ title: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

34 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/music/[title]/page.ts:38:31 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ title: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

38   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()

[samcx]

This is part of the breaking changes that came with v15.

• https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
• https://nextjs.org/blog/next-15#async-request-apis-breaking-change

[JsemOlik]

I love you so god damn much. I was trying to figure this out for the past hour and a half 😭

[ignatiosdev]

I fixed it by converting params to a Promise

For example before i did this

export default async function RootLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: {locale: string as "es" | "en"};
}) {
  const { locale } = await params; 

Now I do this

type Params = Promise<{locale: "en" | "es" }>;

export default async function RootLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Params;
}) {
  const { locale } = await params;