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 Asian black bear
Read the error thoroughly and you will understand what it is complaining about.
View full answer

39 Replies

@Dutch remove promise and await
New Guinea Freshwater CrocodileOP
await from await params?
@Dutch
@Dutch remove promise and await
Asian black bear
That is incorrect. Also the error indicates that the error is for the page component, not the metadata function.
@Asian black bear 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?
Asian black bear
Yes, just the signature, no need for the body.
@Asian black bear Yes, just the signature, no need for the body.
New Guinea Freshwater CrocodileOP
export default async function Posts({
  params,
}: {
  params: { refuteId: string };
}) {
// ...
Asian black bear
Yeah, the params need to be a promise as well, just like you did for the metadata.
Asian black bear
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?
Asian black bear
Try and see.
@Asian black bear 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
Asian black bear
Stop the dev server, delete the .next folder and try again.
@Asian black bear Stop the dev server, delete the .next folder and try again.
New Guinea Freshwater CrocodileOP
still same error.
Asian black bear
Did you remove the promise from your generateMetadata?
@Asian black bear 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)
Asian black bear
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
Asian black bear
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'.
...
Asian black bear
That error is for a different page for the same reasons.
@Asian black bear 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
Asian black bear
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.