Sanity与Next.js问题：前端无法读取Sanity项目，Socials数据不显示

• 核对Sanity数据与查询匹配度
  先在Sanity Vision工具里执行GROQ查询，确认能拿到Socials数据：

  *[_type == "socials"]{platform, url}
  

  注意字段名大小写要和Studio里的文档结构完全一致，同时检查文档是否已发布（草稿状态的数据无法被前端读取）。

• 验证前端数据获取流程
  查看前端的Sanity客户端配置，确认项目ID、数据集名称正确。在数据请求代码里加日志，确认数据是否成功返回：

  const socials = await sanityClient.fetch('*[_type == "socials"]');
  console.log('Socials 数据:', socials);
  

  排查是否存在异步加载顺序问题，比如组件渲染时数据还未请求完成，导致渲染空内容。

• 检查前端渲染逻辑
  打开渲染Socials的组件代码，确认正确遍历了数据数组：

  {socials?.map(social => (
    <a key={social._id} href={social.url} rel="noopener noreferrer" target="_blank">
      {social.platform}
    </a>
  ))}
  

  同时确认组件的socials props是否正确传递，没有被误赋值或遗漏。

• 确认Sanity API权限
  如果使用了私有数据集，检查API令牌是否拥有读取权限；公开数据集则确认项目设置中已开启公开数据访问。

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