Next.js TypeScript类型错误：ComposerPageProps不满足PageProps约束

问题核心 #

你的错误本质是ComposerPageProps中的params类型被错误标记为Promise类型，但Next.js页面组件接收的params是已解析的普通对象（如{ id: string }），两者类型不兼容导致报错。

具体解决方案 #

1. 修正ComposerPageProps的类型定义 #

检查你自定义的ComposerPageProps，确保params是普通对象而非Promise：

// 错误写法（params被定义为Promise）
type ComposerPageProps = {
  params: Promise<{ id: string }>;
};

// 正确写法
type ComposerPageProps = {
  params: { id: string };
};

2. 确保页面组件参数正确使用 #

Next.js App Router的页面组件接收的params是同步传入的已解析对象，不需要用await处理：

// 正确的页面组件写法
export default function ComposerPage({ params }: ComposerPageProps) {
  // 直接使用params.id，无需await
  return <div>作曲家详情：{params.id}</div>;
}

3. 对齐generateMetadata的参数类型 #

如果你的页面定义了generateMetadata，确保它的参数类型和页面组件的props类型一致：

export async function generateMetadata({ params }: ComposerPageProps) {
  return {
    title: `作曲家 ${params.id}`,
  };
}

4. 避免错误的类型导入或自定义 #

如果你手动导入了PageProps，确保是从Next.js的正确路径导入，不要自定义冲突的PageProps类型：

// 正确导入（App Router场景）
import type { PageProps } from 'next/app';

注：App Router中其实无需手动导入PageProps，直接定义你的自定义props类型即可，Next.js会自动推断约束。

5. 客户端组件的异步值传递处理 #

如果是从服务器组件向客户端组件传递数据时误用了Promise，需先解析Promise再传递：

// 服务器组件
export default async function ComposerPage({ params }: { params: { id: string } }) {
  // 先解析异步数据
  const composerData = await fetchComposerData(params.id);
  // 向客户端组件传递已解析的值，而非Promise
  return <ClientComposer data={composerData} id={params.id} />;
}

内容的提问来源于stack exchange，提问作者user22540255