Next.js嵌套动态路由下如何正确使用getStaticPaths？

问题结论 #

嵌套动态路由完全适配getStaticPaths，你遇到的报错是因为getStaticPaths中没有正确生成包含brandSlug和vehicleSlug的参数结构，导致Next.js无法获取到必填的brandSlug参数。

报错原因 #

你的[brandSlug]/[vehicleSlug].js中，getStaticPaths返回的paths数组里，每个params对象缺失brandSlug字段，或者字段名错误，导致Next.js抛出"A required parameter (brandSlug) was not provided"的错误。

正确实现步骤 #

1. 正确编写getStaticPaths，生成所有合法路径组合

需要预先生成所有品牌slug + 车型slug的合法组合，确保每个params对象同时包含brandSlug和vehicleSlug：

export async function getStaticPaths() {
  // 从数据源（API/本地JSON/数据库）获取所有品牌及其下属车型
  const brandData = [
    { slug: "toyota", vehicles: [{ slug: "toyota-innova" }, { slug: "toyota-corolla" }] },
    { slug: "mitsubishi", vehicles: [{ slug: "mitsubishi-pajero" }] }
  ];

  // 扁平化生成所有合法路径参数
  const paths = brandData.flatMap((brand) =>
    brand.vehicles.map((vehicle) => ({
      params: {
        brandSlug: brand.slug,
        vehicleSlug: vehicle.slug,
      },
    }))
  );

  return {
    paths,
    fallback: false, // 所有合法路径预先生成，非法路径直接返回404
  };
}

2. 在getStaticProps中验证参数合法性（可选但更安全）

即使设置了fallback: false，如果后续数据源更新或者出现异常情况，建议在getStaticProps中再次验证当前路径的参数是否合法，非法则返回404：

export async function getStaticProps({ params }) {
  const { brandSlug, vehicleSlug } = params;

  // 从数据源获取品牌和车型数据（和getStaticPaths用同一数据源）
  const brandData = [
    { 
      slug: "toyota", 
      vehicles: [
        { slug: "toyota-innova", name: "Toyota Innova" }, 
        { slug: "toyota-corolla", name: "Toyota Corolla" }
      ] 
    },
    { 
      slug: "mitsubishi", 
      vehicles: [{ slug: "mitsubishi-pajero", name: "Mitsubishi Pajero" }] 
    }
  ];

  // 验证品牌是否存在
  const targetBrand = brandData.find((b) => b.slug === brandSlug);
  if (!targetBrand) {
    return { notFound: true };
  }

  // 验证当前品牌下的车型是否存在
  const targetVehicle = targetBrand.vehicles.find((v) => v.slug === vehicleSlug);
  if (!targetVehicle) {
    return { notFound: true };
  }

  // 将合法数据传递给组件
  return {
    props: {
      brand: targetBrand,
      vehicle: targetVehicle,
    },
  };
}

非法路径处理说明 #

• 当设置fallback: false时，所有不在getStaticPaths生成列表中的路径（如mitsubishi/toyota-innova或toyota/random-parameter123）会直接返回404页面。
• 如果需要支持动态新增的品牌/车型（无需重新构建），可以将fallback设置为'blocking'，此时首次访问合法的新路径会触发getStaticProps生成页面，非法路径依然通过getStaticProps中的验证返回404。

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