我在 Next.js 15 应用中尝试使用异步参数时遇到问题。我想slug从中提取参数params，该参数作为返回Promise。

这是我当前的设置page.tsx：

type tParams = Promise<{ slug: string[] }>;

export default async function Challenge({ params }: { params: tParams }) {
  const { slug } = await params;
  const productID = slug[1];

  // other code here
}

当我运行时npm run build，出现此错误：

类型错误：类型“{params：{id：string；}；}”不满足约束“PageProps”。属性“params”的类型不兼容。类型“{id：string；}”缺少类型“Promise”中的以下属性：then、catch、finally、[Symbol.toStringTag]

似乎 的类型params导致了问题，可能是因为 Next.js 需要 的不同结构params。

我尝试过的方法

  • 我最初定义params为{ slug: string[] }，但我将其更改为，Promise<{ slug: string[] }>以尝试处理异步行为。
  • 我也尝试了不同的类型配置，但是params都没有成功。

问题

如何params在 Next.js 15 中正确输入异步访问的对象，或者是否有其他推荐的方法？

1


  • – 


最佳答案
1

从迁移指南中的示例中，他们表明您不能使用道具的解构成员……

也许可以尝试一下这种改变 –

type tParams = Promise<{ slug: string[] }>;

export default async function Challenge(props: { params: tParams }) {
  const { slug } = await props.params;
  const productID = slug[1];

  // other code here
}