Next.js 15路由类型错误：params不满足PageProps约束

你的核心问题是错误地将params定义为Promise类型——Next.js的页面组件接收的params是同步的普通对象，并非Promise，不需要用await去解析。

正确的代码实现 #

1. 匹配动态路由结构的类型定义 #

假设你的路由是app/challenge/[...slug]/page.tsx（即捕获所有分段的动态路由），正确的类型定义应该直接描述params的结构，而非包裹成Promise：

// 定义params的实际结构，对应[...slug]路由
type ChallengeParams = {
  slug: string[];
};

// 页面组件接收的props类型，直接使用上述定义
type ChallengePageProps = {
  params: ChallengeParams;
};

export default async function Challenge({ params }: ChallengePageProps) {
  // 直接使用params，无需await
  const productID = params.slug[1];

  // 后续业务代码
}

2. 利用Next.js内置类型简化定义 #

你也可以直接使用Next.js提供的PageProps类型，结合泛型指定params结构：

import type { PageProps } from 'next';

type ChallengeParams = {
  slug: string[];
};

export default async function Challenge({ params }: PageProps<ChallengeParams>) {
  const productID = params.slug[1];

  // 后续业务代码
}

错误原因解析 #

你之前将params定义为Promise<{ slug: string[] }>，但Next.js在渲染页面时会自动解析动态路由参数并以同步对象的形式传入组件，不需要手动处理Promise。这种错误的类型定义导致TypeScript检测到类型不兼容，抛出了{ id: string; }缺少Promise方法的错误。

额外注意事项 #

• 确保动态路由文件命名正确：如果要捕获多个分段的参数，必须命名为[...slug]/page.tsx；如果是单个参数，命名为[slug]/page.tsx，此时params.slug是string而非数组。
• 若业务逻辑需要异步获取数据，应该在组件内部单独编写异步函数，而非把params当成Promise处理。

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