如何获取Contentful富文本字段内容？解决富文本渲染异常问题

核心代码问题定位 #

• 入参逻辑偏差：renderRichText的固定入参为Contentful富文本字段的完整对象，组件外层声明的空变量richTextField从未被赋值，调用时必然触发undefined报错。
• 解构逻辑错误：组件内const { body } = node.body的写法，是从node的body属性下二次查找同名子属性，实际该嵌套属性不存在，无法获取有效渲染内容。
• GraphQL查询不匹配：当前查询嵌套获取body { raw }是旧版富文本渲染的写法，适配renderRichText方法时，无需单独查询raw字段，直接获取富文本完整对象即可满足渲染要求。

分步修正操作 #

• 移除组件外层无意义的空变量声明let richTextField
• 调整GraphQL查询结构，删除富文本字段下的raw嵌套查询，直接查询完整的body字段
• 调整Card组件内的取值逻辑，将从node上获取的完整富文本对象作为入参传给renderRichText

修正后的代码示例 #

Index.js 内的GraphQL查询修正 #

export const query = graphql`
query {
  posts: allContentfulPost {
    edges {
      node {
        id
        title
        slug
        content{
           content
         }
        # 直接查询完整富文本对象，无需嵌套取raw
        body
      }
    }
  }
}
`

Card.js 修正后完整代码 #

import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
  },
}

function Card({ node }) {
  // 直接获取富文本完整对象作为渲染入参
  const richContent = node.body

  return (
    <article style={{backgroundColor:"red"}}>
      <div>
        {richContent && renderRichText(richContent, options)}
      </div>
    </article>   
  ) 
}

export default Card;

注意事项 #

• 调用renderRichText时无需手动解析raw JSON字符串，gatsby-source-contentful插件会自动完成富文本结构的解析
• 富文本内嵌的图片、关联条目等资源，无需手动单独查询，只要GraphQL返回完整富文本对象，插件会自动关联对应资源数据

内容的提问来源于stack exchange，提问作者Lisa Lee Kallman