如何从已部署Sanity项目拉取数据到Next.js？返回undefined如何解决

• 第一步：先确认Sanity侧数据和查询条件匹配
  确认你的Sanity项目中确实存在_type值为projects的文档，且对应文档包含title字段。常见拼写错误包括_type写成单数project、title首字母大写、字段名拼写错误，都会导致查询返回空结果。
• 第二步：检查CORS配置
  进入Sanity管理后台的API配置页，将你本地开发地址（通常为http://localhost:3000）添加到允许的CORS来源列表中，添加时勾选「允许凭据」选项，未配置CORS会导致请求被拦截，无法拿到返回数据。
• 第三步：添加错误捕获和兜底逻辑
  修改getStaticProps代码，增加异常捕获和打印逻辑，优先定位是请求报错还是查询返回空：

  export async function getStaticProps(context: any) {
    try {
      const data = await client.fetch(`*[_type == "projects"]{
        title
      }`);
      // 开发环境下可直接打印查看返回结果
      console.log("Sanity查询结果", data);
      return {
        props: { data: data ?? [] }, // 兜底返回空数组避免组件拿到undefined
      };
    } catch (err) {
      // 打印错误信息，排查是网络、权限还是查询语法问题
      console.error("Sanity请求错误", err);
      return {
        props: { data: [] }
      };
    }
  }
  

• 第四步：用原生请求验证接口可用性
  你熟悉fetch/axios的话可以直接调用Sanity的公开HTTP接口验证查询是否有效，接口格式为：
  https://<projectId>.api.sanity.io/v<apiVersion>/data/query/<dataset>?query=<GROQ查询语句>
  你当前配置拼接出来的测试地址为：
  https://hmrph9hs.api.sanity.io/v2021-03-25/data/query/production?query=*[_type == "projects"]{title}
  直接在浏览器中访问该地址即可看到原始返回结果，若此处返回空则说明是查询条件或Sanity侧数据问题，若返回正常则继续排查客户端初始化问题。
• 第五步：校验客户端初始化逻辑
  确认你已经安装了@sanity/client依赖，若使用最新版客户端，初始化方法为命名导出的createClient，而非旧版的默认导出sanityClient，示例正确初始化代码：

  import { createClient } from '@sanity/client'
  
  const client = createClient({
    projectId: "hmrph9hs",
    dataset: "production",
    apiVersion: "2021-03-25",
    useCdn: true,
  })
  

  若你使用的是旧版@sanity/client包，则可以保留原有sanityClient的初始化写法。

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