NextJS中getStaticPaths函数如何获取参数？构建报错求助

错误原因 #

这个错误说明你在getStaticPaths函数中没有返回包含brand（以及model、version）参数的有效路径集合，或者参数类型不是字符串。Next.js静态构建时需要明确所有要预渲染的动态路径参数组合，且每个参数必须以字符串形式提供。

具体实现步骤 #

你需要在getStaticPaths里生成所有可能的路径参数组合，这些参数值可从你的数据源（API、本地JSON、数据库等）获取，然后返回符合要求的paths数组。

示例代码

// 页面文件路径：/pages/[locale]/suscripcion/[brand]/[model]/[version].jsx
export async function getStaticPaths() {
  // 1. 从数据源获取所有可能的参数组合（示例：从API拉取）
  const productList = await fetch('你的数据源接口地址').then(res => res.json());

  // 2. 生成符合路径规则的参数组合，所有参数必须是字符串类型
  const paths = productList.map(item => ({
    params: {
      locale: item.locale, // 示例值：'es'、'en'
      brand: item.brand,   // 示例值：'toyota'，必须为字符串
      model: item.model,   // 示例值：'camry'，必须为字符串
      version: String(item.version) // 若为数字，需转换为字符串
    }
  }));

  // 3. 返回路径集合与fallback配置
  return {
    paths,
    fallback: false // 可选配置：false=仅预生成paths内的路径；true=按需生成未预定义的路径
  };
}

export async function getStaticProps({ params }) {
  // 从params中提取动态参数，获取对应页面数据
  const { locale, brand, model, version } = params;
  const pageData = await fetch(`你的数据接口/${locale}/suscripcion/${brand}/${model}/${version}`)
    .then(res => res.json());

  return {
    props: { pageData, locale }
  };
}

export default function SubscriptionPage({ pageData, locale }) {
  // 页面渲染逻辑
  return <div>{/* 渲染页面内容 */}</div>;
}

关键注意事项 #

• params中的键名必须和路径中的动态参数完全匹配（locale、brand、model、version）
• 所有参数值必须是字符串类型，数字类型需通过String()转换
• 若无法提前获取所有参数组合，可将fallback设为true或'blocking'，构建时无需生成所有路径，用户访问未预定义路径时会动态生成并缓存

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