Next.js全量捕获动态路由[[...Id]].js中getStaticPaths无法获取参数问题

核心问题原因 #

getStaticPaths 设计为构建阶段（或后台增量再生阶段）执行的方法，作用是提前声明所有需要预渲染的路径列表，不会接收用户访问时的请求上下文，自然无法直接拿到访问URL里的动态参数。

解决方案（根据你的业务场景二选一即可） #

方案1：预生成全量路径（适合分类总数不大、更新频率低的场景）

你可以在getStaticPaths内部先请求全量分类接口，生成所有需要预渲染的路径参数：

export async function getStaticPaths() {
  // 调用你的后台接口获取全部分类的slug（即fashion这类分类标识）和分类ID
  const categoryRes = await fetch('https://lenapp.ae/api/v5/web/all-categories') // 替换为你的全量分类接口地址
  const allCategories = await categoryRes.json()

  const paths = allCategories.map(item => ({
    params: {
      // 对应URL结构/category/[分类slug]/[分类ID]，Id为长度为2的数组
      Id: [item.slug, String(item.id)]
    }
  }))

  return { paths, fallback: 'blocking' }
}

方案2：无需预生成路径，直接利用fallback能力（适合分类数量多、更新频繁的场景）

你当前已经配置了fallback: 'blocking'，这种规则下未提前声明的路径，用户首次访问时Next.js会自动在服务端执行getStaticProps生成页面，生成后缓存复用，和预生成的页面体验一致。你直接把paths设为空数组即可，不需要修改其他逻辑：

export async function getStaticPaths() {
  return { paths: [], fallback: 'blocking' }
}

注意事项 #

• catch all路由的params.Id必须为数组，长度要和实际URL的路径分段数匹配，你当前的URL是两级动态分段，所以Id数组长度固定为2
• 路由参数默认是字符串类型，如果你的分类ID是数字，需要转成字符串再传给Id数组
• 若使用方案2，用户首次访问未缓存的路径时会有加载等待，之后访问直接走缓存，性能和预生成页面一致。

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