NextJS嵌套动态路由中getStaticPaths的GROQ查询问题

核心问题分析 #

你的嵌套路由/collections/[collection_slug]/product/[product_slug]需要同时提供collection_slug和product_slug两个参数，但当前GROQ查询未同时获取这两个关联字段，导致getStaticPaths无法生成包含完整参数的路径数组。

步骤1：编写关联查询获取双slug #

在product/[product_slug].js的getStaticPaths中，使用Sanity GROQ的引用跳转语法->，同时获取产品slug及其关联集合的slug：

// 引入已配置好的Sanity客户端
import { sanityClient } from '../../lib/sanity'

export async function getStaticPaths() {
  // GROQ查询：筛选关联了集合的产品，同时提取产品和对应集合的slug
  const query = `
    *[_type == "product" && defined(collection)] {
      product_slug: slug.current,
      collection_slug: collection->slug.current
    }
  `

  const productsWithCollections = await sanityClient.fetch(query)

  // 生成符合Next.js要求的路径数组，每个路径必须包含两个slug参数
  const paths = productsWithCollections.map(item => ({
    params: {
      collection_slug: item.collection_slug,
      product_slug: item.product_slug
    }
  }))

  return {
    paths,
    fallback: false // 可根据需求设置为true或'blocking'
  }
}

步骤2：在getStaticProps中接收双参数并查询产品详情 #

确保getStaticProps同时接收两个slug参数，通过双重条件过滤获取精准的产品数据：

export async function getStaticProps({ params }) {
  const { collection_slug, product_slug } = params

  const query = `
    *[_type == "product" && slug.current == $product_slug && collection->slug.current == $collection_slug][0] {
      title,
      slug,
      description,
      collection->{title, slug},
      // 按需添加其他字段
    }
  `

  const product = await sanityClient.fetch(query, { product_slug, collection_slug })

  if (!product) {
    return { notFound: true }
  }

  return {
    props: { product },
    revalidate: 60 // 可选：设置增量静态生成的刷新间隔
  }
}

关键注意事项 #

• 确认Sanity中product类型的collection字段为引用类型，指向collection文档
• 查询中用defined(collection)过滤未关联集合的产品，避免出现null值的collection_slug
• 若需支持增量静态生成，将fallback设为true或'blocking'，并在getStaticProps中处理未预生成的路径

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