React+Sanity.io搭建博客无法加载文章且出现eslint匿名导出报错如何解决

问题1：Sanity schema文件post.js的ESLint报错 #

这个报错是ESLint的import/no-anonymous-default-export规则触发，要求默认导出不能是匿名值，你只需要把原来直接导出的schema对象赋值给一个命名变量后再导出即可，修改示例如下：

// post.js修改后代码
const postSchema = {
  // 你原来所有的schema配置内容都放在这里，包括name、type、fields等属性
  name: 'post',
  type: 'document',
  title: '博客文章',
  fields: [
    // 原有字段配置不变
  ]
}

export default postSchema

这个报错本身属于代码规范问题，不影响代码实际运行，修改后绿色下划线提示就会消失。

问题2：无法从Sanity加载博客内容的排查步骤 #

按顺序逐一排查即可定位问题：

• 核对Sanity客户端配置
  打开你项目里的../client.js文件，确认三个核心配置项正确：
  • projectId与Sanity后台显示的项目ID完全一致
  • dataset与你存储文章的数据集名称一致，默认值为production
  • apiVersion填写有效日期格式的版本号，例如2023-01-01
• 增加日志排查请求结果
  修改你的useEffect代码，增加日志输出查看请求返回内容和报错信息：

useEffect(() => {
  sanityClient
    .fetch(`*[_type == "post"]{
      title,
      slug,
      mainImage{
        asset->{
          _id,
          url
        },
        alt
      }
    }`)
    .then((data) => {
      console.log('Sanity返回数据：', data)
      setPost(data)
    })
    .catch((err) => console.error('拉取数据失败：', err))
}, []);

打开浏览器控制台查看输出：

• 如果输出报错：说明客户端配置或者网络有问题，根据报错内容修正
• 如果输出为空数组：说明你Sanity后台没有已发布的post类型内容，进入Sanity Studio确认你创建的文章已经点击「发布」，草稿状态的内容不会被查询返回
• 如果输出有内容：检查你渲染逻辑里的字段名和返回数据的字段名是否完全匹配，注意大小写问题
• 验证GROQ查询正确性
  你可以直接把代码里的GROQ查询语句复制到Sanity Studio的Vision插件中运行，如果能查到数据说明查询正确，问题出在前端配置；如果查不到则说明查询语法错误或者没有对应内容。
• 增加空状态提示优化排查
  修改你的渲染逻辑，增加加载中和空数据提示，避免无内容时没有反馈：

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
  {!postData ? <p>正在加载文章...</p> : 
   postData.length === 0 ? <p>暂无发布的文章</p> :
   postData.map((post, index) => (
    // 原有渲染逻辑保持不变
  ))}
</div>

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