使用gatsby-source-contentful在Gatsby与Contentful中渲染富文本异常问题

• contentful返回的bodyRichText.raw是序列化的JSON字符串，不是可遍历的节点数组：你对字符串调用数组专属的map方法，字符串原型本身不存在该方法，要么逻辑直接静默不执行，要么因为空值等原因没有抛出错误，自然没有内容输出。
• documentToReactComponents方法接收的是完整的富文本结构对象，不需要你手动遍历节点，它内部已经实现了节点递归解析渲染的逻辑，强行遍历反而会破坏正常的渲染流程。

1. 先确认你已经正确安装并导入依赖：

npm install @contentful/rich-text-react-renderer

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

2. 修改组件代码，无需遍历，直接将raw转换为JSON对象后传入方法即可：

function ArticleBody({raw}) {
  // 空值判断避免异常报错
  if (!raw) return null;

  // 将raw字符串转换为可识别的富文本对象，如果你使用的插件版本已经自动完成parse操作，可以直接传入raw
  const richTextObj = typeof raw === 'string' ? JSON.parse(raw) : raw;

  return (
    <>
      {documentToReactComponents(richTextObj)}
    </>
  );
}

export default ArticleBody;

如果需要自定义富文本内各元素的渲染样式，比如修改代码块、链接、图片的展示逻辑，可以传入第二个配置参数：

import { BLOCKS, INLINES } from '@contentful/rich-text-types';

const renderOptions = {
  renderNode: {
    [BLOCKS.HEADING_1]: (node, children) => <h1 className="post-title">{children}</h1>,
    [INLINES.HYPERLINK]: (node, children) => <a href={node.data.uri} target="_blank" rel="noopener noreferrer">{children}</a>
  }
}

// 调用时传入配置即可
documentToReactComponents(richTextObj, renderOptions)

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