Gatsby集成Contentful富文本时raw字段解析失败求助

核心问题 #

你的event.description.raw是JSON字符串类型，但renderRichText需要接收的是解析后的JSON对象。虽然你尝试过JSON.parse，但可能是解析时机不对，或者pageContext序列化导致的转义问题影响了解析结果。

解决方案一：在组件内解析并传入 #

修改event.js，先将raw字符串解析为JSON对象，再传给renderRichText，同时添加异常处理避免解析失败：

const Event = ({ pageContext }) => {
  const { event } = pageContext;
  console.log('grabbing event', event);
  const image = event.flyer;

  // 解析富文本raw字符串
  let parsedRichText = {};
  if (event.description?.raw) {
    try {
      parsedRichText = JSON.parse(event.description.raw);
    } catch (err) {
      console.error('解析富文本失败:', err);
    }
  }

  return (
    <>
      <h2 className={styles.EventTitle}>{event.title}</h2>
      <div className={`row`}>
        <div className={` ${styles.EventInfo}`}> 
          {renderRichText(parsedRichText)}
        </div>
      </div>
      <div className={`row`}>
        <img className={styles.EventImage} src={image}/>
        <div className={` ${styles.EventActions}`}>
          <Link to={event.ticket}><button className={styles.EventButton}>Tickets</button></Link> 
        </div>
      </div>
    </>
  )
};

export default Event;

解决方案二：在gatsby-node.js中提前解析（更推荐） #

因为Gatsby的pageContext会被序列化，字符串多次转义可能导致解析异常，所以建议在创建页面时就把raw字符串解析为对象：

修改gatsby-node.js中的transformEvent函数：

const transformEvent = (data) => {
  console.log(data);
  // 提前解析富文本raw
  let descriptionData = data.description;
  if (data.description?.raw) {
    try {
      descriptionData = JSON.parse(data.description.raw);
    } catch (err) {
      console.error('解析富文本失败:', err);
      descriptionData = data.description;
    }
  }

  return {
    title: data.title,
    description: descriptionData, // 直接传解析后的对象
    slug: data.slug,
    ad_mats: data.ad_mats,
    flyer: data.square_flyer.file.url,
    ticket: data.ticketlink,
    date: data.starttime,
    venue: data.venue.name,
    address: data.venue.street_address,
    city: data.venue.city
  }
};

然后修改event.js中调用renderRichText的部分：

// 直接传入解析后的对象
{renderRichText(event.description)}

额外检查 #

1. 确认已正确导入renderRichText：

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

2. 检查控制台是否有JSON解析报错，如果有，说明raw字符串的转义存在问题，需要确认Contentful后台的富文本字段是否正常。

内容的提问来源于stack exchange，提问作者Kyle Calica-St