Next.js+Sanity富文本code块报错如何配置serializers.types

你贴出的BlockSerializer是Sanity富文本序列化的内置校验逻辑，不需要修改这段代码。报错的核心原因是：你传入富文本渲染组件的serializers.types配置中，没有定义code类型块对应的渲染规则，序列化器遇到Sanity返回的_type: "code"块时找不到处理逻辑，就会抛出这个错误。

• 找到项目中渲染Sanity富文本的业务组件（也就是你调用富文本渲染方法、传入serializers配置的文件，不要修改依赖包内的源码）。
• 在serializers配置的types字段下，补充code类型对应的渲染组件，参考配置如下：

// 富文本渲染配置示例，适配Next.js + React技术栈
const serializers = {
  types: {
    // 保留你原有配置里的其他类型规则，比如image、自定义块等
    code: ({ value }) => {
      // value为Sanity返回的代码块数据，默认包含code（代码内容）、language（代码语言）字段
      return (
        <pre className="code-block" data-lang={value.language || 'plaintext'}>
          <code>{value.code}</code>
        </pre>
      )
    }
  },
  // 原有marks、list、block等其他配置保持不变即可
}

// 渲染富文本时传入配置
// 如果你用的是新版@portabletext/react：
<PortableText value={blogPost.body} components={serializers} />
// 如果你用的是老版@sanity/block-content-to-react：
// <BlockContent blocks={blogPost.body} serializers={serializers} />

• 如果你需要代码高亮效果，直接在上面的code序列化组件中接入你项目使用的高亮库（比如Prism.js、Highlight.js），在组件挂载后执行高亮方法即可。
• 校验Sanity端配置：确认你在Sanity schema中注册的代码块类型名确实为code（@sanity/code-input插件默认的类型名就是code，没有手动修改过name字段的话不需要调整）。

配置完成后重新启动项目，富文本渲染时就能正常识别代码块，不会再抛出该错误。

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