NextJS (15) 与动态路由

Question

在我的 NextJs 14 应用程序中，我得到了这个路线和页面，它运行完美

src\app\[id]\[[...slug]]\page.tsx

我可以访问 id 和 slug（我不需要 slug，它只是用于 SEO 友好的 url）

interface PageProps {
  params: { id: string; slug?: string[] };
}

const Page = async ({ params }: PageProps) => {
  const { id } = params;
  .....

在 NextJs15 应用程序中执行完全相同的操作，它运行良好（npm run dev），但是当我构建时

.next/types/app/[id]/[[...slug]]/page.ts:34:29 类型错误：类型 “PageProps”不满足约束 '导入（“C：/aaaa/web/aaa-01/.next/types/app/[id]/[[...slug]]/page”）.PageProps'。 属性“params”的类型不兼容。 输入 '{ id: 字符串; slug？： 字符串 |不明确的; }' 缺少类型“Promise”中的以下属性：then、catch、finally、 [Symbol.toStringTag]

32 | 33 | 33 // 检查入口函数的prop类型

34 | checkFields, '默认'>>() | ^ 35 | 36 | 36 // 检查generateMetadata 函数的参数和返回类型 37 |如果 （条目中的“generateMetadata”）{

我想让我简化并创建

src\app\listing\[id]\page.tsx

与页面代码

interface PageProps {
  params: { id: string };
}
 
const Page = ({ params }: PageProps) => {
  const { id } = params;

  return <div>Page for {id}</div>;
};

export default Page;

但同样的错误（仅当我构建时，而不是运行时..那么就可以了）

Answer 1

原因是 Nextjs 15 中的更改，动态 API 是异步的 所以你必须等待参数才能获取 slug 和 id

interface PageProps {
  params: Promise<{ id: string }>;
}

const Page = async ({ params }: PageProps) => {
  const { id } = await params;

  return <div>Page for {id}</div>;
};

export default Page;