Next.js渲染Sanity博客author字段报React子元素无效错误

这个报错来自两个叠加的问题：

• 你配置的author字段是套了一层object的嵌套结构，实际引用对象的访问路径是blog.author.author，直接渲染blog.author相当于把普通JS对象扔给React渲染，React不支持直接渲染对象，直接抛错。
• Sanity的reference类型默认只会返回关联文档的_ref ID，不会自动返回关联的作者名称等内容，必须在GROQ查询时主动联表拉取关联字段。

方案1：简化Schema结构（优先选，后续维护成本最低） #

当前嵌套一层无意义object的写法完全多余，直接把blog schema里的author字段改成直接引用类型即可：

{
  title: 'Author',
  name: 'author',
  type: 'reference',
  to: [{type: 'author'}]
}

修改完成后需要去Sanity管理后台，给已发布的历史博客重新绑定作者，字段结构调整后旧的嵌套数据会失效。

方案2：保留现有Schema，同步调整查询和渲染逻辑 #

如果不想改动已有的Schema结构，只需要调整GROQ查询语句和前端渲染代码：

1. GROQ查询时用->操作符联表展开两层嵌套的作者字段，拉取需要展示的作者信息（字段名根据你自己的author schema调整，比如存名字的字段是name就写name）：

*[_type == "blog" && slug.current == $slug][0]{
  // 其余需要的博客字段，比如title、mainImage、body、publishedAt正常写
  "authorInfo": author.author->{
    name,
    avatar,
    bio
  }
}

2. 前端渲染时直接取拉取回来的具体字段，不要直接渲染对象：

<p className="blog-author">作者：{blog.authorInfo?.name}</p>

方案3：仅调整渲染路径（不推荐） #

如果已经在查询里展开了引用字段，只是路径写错了，直接修正渲染时的取值路径即可，注意要取两层author：

<p>作者：{blog.author?.author?.name}</p>

这个写法因为嵌套结构冗余，后续维护很容易写错路径，不建议长期用。

• 所有Sanity的reference关联字段，要拿到关联文档的具体内容，必须在GROQ查询里加->展开，不然拿到的只有带_ref的引用标识，取不到名称、头像这类实际内容。
• React JSX里只支持渲染字符串、数字、合法JSX节点、数组这类类型，只要出现「Objects are not valid as a React child」报错，先检查是不是直接把普通对象放到了花括号里渲染。

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