Next.js Discord

Discord Forum

Unknown Types error

Answered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
Hey guys. Here's a snippet of what my code looks like (src/app/doubt-refutations/refutation/[refutationId]/page.tsx):

// ...
export async function generateMetadata({
  params,
}: {
  params: Promise<{ refuteId: string }>;
}): Promise<Metadata> {
  const { refuteId } = await params;
  try {
    const post = await databases.getDocument(
      databaseId,
      collectionId,
      refuteId
    );
    return {
      title: post.title,
      description: post.description || post.title,
      openGraph: {
        images: post.image ? [{ url: post.image }] : undefined,
      },
    };
  } catch {
    return {
      title: "Refutation Not Found | Al-Mahdia",
      description: "The requested refutation could not be found.",
    };
  }
}
// ...


while building for production, got this error:
.next/types/app/doubt-refutation/refutation/[refuteId]/page.ts:34:29
Type error: Type '{ params: { refuteId: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ refuteId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

  32 |
  33 | // Check the prop type of the entry function
> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |                             ^
  35 |
  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {
Next.js build worker exited with code: 1 and signal: null


I have 0 idea on how to fix this.
Answered by Giant panda
Read the error thoroughly and you will understand what it is complaining about.
View full answer

39 Replies

@Dwarf Hotot remove promise and await
New Guinea Freshwater CrocodileOP
await from await params?
@Dwarf Hotot
@Dwarf Hotot remove promise and await
Giant panda
That is incorrect. Also the error indicates that the error is for the page component, not the metadata function.
@Giant panda That is incorrect. Also the error indicates that the error is for the page component, not the metadata function.
New Guinea Freshwater CrocodileOP
should I send snippet of my page component?
Giant panda
Yes, just the signature, no need for the body.
@Giant panda Yes, just the signature, no need for the body.
New Guinea Freshwater CrocodileOP
export default async function Posts({
  params,
}: {
  params: { refuteId: string };
}) {
// ...
Giant panda
Yeah, the params need to be a promise as well, just like you did for the metadata.
Giant panda
just like you did for the metadata.
New Guinea Freshwater CrocodileOP
okay wait
export default async function Posts({
  params,
}: {
    params: Promise<{ refuteId: string }>;
}) {

like this?
Giant panda
Try and see.
@Giant panda Try and see.
New Guinea Freshwater CrocodileOP
gives the same error
.next/types/app/doubt-refutation/refutation/[refuteId]/page.ts:38:31
Type error: Type '{ params: { refuteId: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ refuteId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {
> 38 |   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
     |                               ^
  39 |   checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
  40 | }
  41 |
Next.js build worker exited with code: 1 and signal: null
Giant panda
Stop the dev server, delete the .next folder and try again.
@Giant panda Stop the dev server, delete the .next folder and try again.
New Guinea Freshwater CrocodileOP
still same error.
Giant panda
Did you remove the promise from your generateMetadata?
@Giant panda Did you remove the promise from your `generateMetadata`?
New Guinea Freshwater CrocodileOP
export async function generateMetadata({
  params,
}: {
  params: { refuteId: string };
}): Promise<Metadata> {

the Promise<Metadata>? It gives me this error when I remove it:
The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<Metadata>'?ts(1064)
Giant panda
Both the page and the generateMetadata need to have their params be a promise.
The snippet in your OP was already correct.
Talking about params: Promise<{ refuteId: string }>.
It needs to be in both places.
New Guinea Freshwater CrocodileOP
alright. then do I access refuteId from it as the following?

const awaitedParams = await params
const refuteId = awaitedParams.refuteId
Giant panda
Yes.
New Guinea Freshwater CrocodileOP
alright let me try this
nope. same error.
.next/types/app/publications/[categoryId]/page.ts:34:29
Type error: Type 'PostsPageProps' does not satisfy the constraint 'PageProps'.
...
Giant panda
That error is for a different page for the same reasons.
@Giant panda That error is for a different page for the same reasons.
New Guinea Freshwater CrocodileOP
oh
its for this page now:
interface PostsPageProps {
  params: { categoryId: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}

specifically this interface
fixed its issues
trying now
.next/types/app/publications/[categoryId]/page.ts:34:29
Type error: Type '{ params: Promise<{ categoryId: string; }>; searchParams?: { [key: string]: string | string[] | undefined; } | undefined; }' does not satisfy the constraint 'PageProps'.
  Types of property 'searchParams' are incompatible.
    Type '{ [key: string]: string | string[] | undefined; } | undefined' is not assignable to type 'Promise<any> | undefined'.
      Type '{ [key: string]: string | string[] | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

  32 |
  33 | // Check the prop type of the entry function
> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |                             ^
  35 |
  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {
Next.js build worker exited with code: 1 and signal: null
hmm
Giant panda
Read the error thoroughly and you will understand what it is complaining about.
Answer
New Guinea Freshwater CrocodileOP
alright thanks. if my issue is solved ill close this issue.
New Guinea Freshwater CrocodileOP
close this ticket. Thanks.