✅【Next.js】params の型エラー「Promise」が出る原因と解決法まとめ【generateMetadata 型エラー】

Next.js App Router を使って開発していると、以下のような 謎の型エラー に遭遇したことはありませんか？

Type error: Type '{ uid: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

これは、generateMetadata() や Page() 関数で params を受け取る際に起こる厄介な問題です。この記事では、筆者がこのエラーを実際に解決するまでに試した方法を詳しく紹介します。

---

🧨 エラーの概要

Next.js で以下のように params.uid を使ってプロフィール情報などを取得していたとき…

export async function generateMetadata({ params }: { params: { uid: string } }): Promise<Metadata> {
  const { uid } = params;
  const profile = await getProfileFromFirestore(uid);
  // ...
}

Next.js のビルド時にこのようなエラーが出ました：

Type error: Type '{ uid: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

params に Promise<any> が要求されているような謎のエラーです。

---

🔍 原因：.next/types を tsconfig.json に含めていた

結論から言うと、tsconfig.json に .next/types/**/*.ts を含めていたことが原因でした。

筆者の tsconfig.json には以下のような記述がありました：

"include": [
  "**/*.ts",
  "**/*.tsx",
  "lib/qrcode.min.js",
  "next-env.d.ts",
  ".next/types/**/*.ts"  // ←これが原因！
]

この .next/types は、Next.js の内部用の型ファイルが含まれており、
開発者が直接参照すべきものではありません。

ここに含まれる page.ts の自動生成型ファイルが params の型を壊し、
Next.js が本来期待していない型推論が走っていたことが判明しました。

---

🛠 解決策

1. tsconfig.json の include から .next/types を削除

- ".next/types/**/*.ts"

2. .next フォルダを削除（キャッシュをクリア）

rm -rf .next

PowerShell（Windows）の場合：

Remove-Item -Recurse -Force .next

3. 再ビルド

npm run build

これでビルドエラーが完全に消えました！

---

✨ 正しい tsconfig.json の例（App Router対応）

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "incremental": true,
    "types": ["node", "react"],
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "baseUrl": ".",
    "paths": {
      "@/*": ["app/*"]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "lib/qrcode.min.js",
    "next-env.d.ts"
  ],
  "exclude": [
    "node_modules",
    ".next"  // ✅ ここで自動生成ディレクトリを除外
  ]
}

---

✅ まとめ

内容	対応
エラー	params に Promise<any> が要求される型エラー
原因	tsconfig.json に .next/types/**/*.ts を含めていた
解決策	.next/types を削除し、.next フォルダを削除して再ビルド

---

📌補足：なぜ .next を exclude すべきなの？

Next.js は .next/ フォルダ内にビルド成果物や型補完情報を自動で生成します。
これを tsconfig.json で include してしまうと、型が重複または競合し、
本来の正しい推論が壊れてしまいます。

Next.js公式でも .next の中は触らないように推奨されています。

---

🙋‍♀️ 誰に役立つ？

• generateMetadata() で型エラーに悩んでいる方
• App Router + TypeScript で開発している方
• tsconfig の設定ミスでビルドできなくなった方

---

📝 最後に

TypeScript × Next.js の開発では、tsconfig.json の設定ひとつで大きなエラーを引き起こすことがあります。
今回のように、自動生成ファイルを明示的に除外することで、多くのトラブルを回避できます。

このトラブルに遭遇している方がいたら、ぜひこの記事をシェアしてください！