使用Hygraph+React/Next.js时文本样式标签无法渲染的问题排查

使用Hygraph CMS搭配React/Next.js开发时，遇到文本样式HTML标签无法渲染的问题：

• 尝试用dangerouslySetInnerHTML或html-react-parser的parse方法，都只能渲染纯文本，<b>、<strong>、<em>、<u>这类标签完全失效。
• 示例：字符串<p><strong>Error</strong> <em>in</em> system</p>被渲染成纯文本Error in system，而非带样式的预期效果。
• 代码示例：

import parse from 'html-react-parser'

<ul>
  <li>{notiFicationData.text.html}</li>
  <li dangerouslySetInnerHTML={{ __html: notiFicationData.text.html }} />
  <li>{parse(notiFicationData.text.html)}</li>
</ul>

• Hygraph返回的原始字符串截图：

1. HTML字符串被转义 #

从截图可见，Hygraph返回的内容里<和>被转换成了<和>（比如<p><strong>Error</strong>...），浏览器会把这些转义字符当成纯文本解析，而非HTML标签。

解决方法： #

先对字符串做反转义处理，再渲染：

• 浏览器/Next.js客户端组件可使用DOMParser：

const unescapeHtml = (html) => {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.documentElement.textContent;
};

// 调用示例
<li dangerouslySetInnerHTML={{ __html: unescapeHtml(notiFicationData.text.html) }} />

• 通用正则替换方案：

const unescapeHtml = (html) => {
  return html.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
};

2. Hygraph字段类型配置错误 #

如果Hygraph中对应字段设置为纯文本类型而非富文本(Rich Text)类型，系统会自动转义所有HTML标签，确保输出纯文本内容。

解决方法： #

• 登录Hygraph后台，检查目标字段的类型，确认是Rich Text类型；
• 若之前用的是纯文本字段，修改为Rich Text类型后，重新录入或同步内容。

3. Next.js SSR的特殊处理 #

在Next.js服务器组件中使用html-react-parser时，可能存在解析时机问题，需确保反转义在服务器端完成。

解决方法： #

在服务器组件内先完成反转义，再传入parse：

import parse from 'html-react-parser';

const unescapeHtml = (html) => {
  return html.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
};

// 服务器组件内处理
const parsedContent = parse(unescapeHtml(notiFicationData.text.html));

return <li>{parsedContent}</li>;

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