Next.js：嵌套动态路由数据结构错误的getStaticPaths

Question

我有一个页面 [categories][price].js，我试图在 getStaticPaths 中实现数据结构，例如 cat1/10 cat1/20 cat1/30 cat1/40 cat2/10 cat/20 等

我看过这篇文章：Next.js: getStaticPaths for nested dynamic routes，因为它是相同的错误，但由于它们的数据结构有点不同，我不知道如何将其转换为我的示例

我在尝试创建动态路由时遇到以下错误，因此我似乎错误地映射了数据。

Error: Additional keys were returned from `getStaticPaths` in page "/[catSlug]/[price]". URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.:

    return { params: { catSlug: ..., price: ... } }

Keys that need to be moved: 0, 1.

如何正确映射我的数据？

[类别][价格].js

export async function getStaticPaths() {
   const prices = [' 10', ' 20', ' 30']
  const categories = [{ name: 'cat' }, { name: 'cat2' }, { name: 'cat3' }]
  const paths = categories.map(({ slug }) =>
    prices.map((price) => ({ params: { catSlug: slug, price: price } }))
  )
  return {
    paths,

    fallback: false
  }
}

Answer 1

展平数组

const paths = categories.map(({ name }) =>
  prices.map((price) => ({ params: { catSlug: name, price: price } }))
).flat()