foxcode

「Type 'Props' does not satisfy the constraint 'PageProps'.」と表示された時の対処法

Next.jsでビルドした際に以下のエラーが表示されました。

ts
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]

このエラーはPropsの値をPromise<any>の型に修正し、受け取り時に非同期にするとエラーが解決します。

修正前のコードは以下です。

ts
type Props = {
    params: {
        id: string;
    };
}

修正後のコードは以下です。

ts
type Props = {
    params: Promise<{
        id: string;
    }>;
}
tsx
async function Page({ params }) {
  const { id } = await params
  return <p>ID: {id}</p>
}

上記のエラーはビルド時に表示されるもので、ビルドせずに稼働中にページにアクセスした場合は、以下のような警告が表示されました。

php
hoge should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

参考：https://nextjs.org/docs/messages/sync-dynamic-apis

関連記事