Sanity/Next.js：无法通过当前slug获取set_name问题求助

1. 修正组件接收props的方式 #

你的组件直接将setData作为参数，但React组件接收的是props对象，需调整为以下两种写法之一：

// 写法1：解构props
const Sets = ({ setData }) => {
  return ( 
    <div> 
      <Header />
      <main className="slug-gallery"> 
        <div className='title'>
          {/* 加兜底逻辑，避免数据为空时渲染报错 */}
          <h2>{setData?.set_name || '暂无名称'}</h2>
        </div>
      </main>
    </div>
  )
}
export default Sets;

// 写法2：通过props对象访问
const Sets = (props) => {
  return ( 
    <div> 
      <Header />
      <main className="slug-gallery"> 
        <div className='title'>
          <h2>{props.setData?.set_name || '暂无名称'}</h2>
        </div>
      </main>
    </div>
  )
}
export default Sets;

2. 明确Sanity查询返回字段 #

你的查询语句未指定要返回的字段，Sanity默认不会返回所有字段，需在查询中明确包含set_name：

export const getServerSideProps = async (pageContext) => {
  const setSlug = pageContext.query.slug;

  // 显式指定要获取的字段
  const setQuery = `*[_type == 'set' && slug.current == $setSlug][0]{set_name, slug}`;
  const setData = await client.fetch(setQuery, {setSlug})

  return {
    props: {setData}
  }
}

3. 验证slug匹配与数据存在性 #

在getServerSideProps中打印关键数据，确认匹配逻辑和查询结果：

export const getServerSideProps = async (pageContext) => {
  const setSlug = pageContext.query.slug;
  console.log('当前传入的slug:', setSlug);

  const setQuery = `*[_type == 'set' && slug.current == $setSlug][0]{set_name, slug}`;
  const setData = await client.fetch(setQuery, {setSlug})
  console.log('Sanity查询返回的数据:', setData);

  return {
    props: {setData}
  }
}

同时检查Sanity后台对应的set文档，确认slug.current的值是否和前端传入的setSlug完全一致（注意大小写、空格、特殊字符等细节）。

4. 处理数据为空的边界情况 #

如果查询未找到对应数据，setData会是undefined，组件中需保留兜底逻辑（如setData?.set_name || '暂无名称'），避免页面渲染报错。

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