React中CKEditor存入Firebase的HTML内容取出后无法正常渲染问题

看起来你遇到的是HTML内容被双重转义的问题——保存到Firebase时内容被转义了一次，取出来渲染时又被React自动转义了一次，导致原本的<p>、<strong>这些标签变成了纯文本的<p>、<strong>，自然没法解析成格式。下面给你一步步解决的方案：

1. 先检查保存数据的代码，避免额外转义 #

CKEditor的getData()方法返回的就是原生HTML字符串，你要做的是直接把这个字符串存到Firebase，不要手动做任何转义（比如escape()、encodeURIComponent()或者自己替换特殊字符）。

举个正确的保存示例：

// 假设你用React ref获取CKEditor实例
const editorRef = useRef(null);

const saveContent = async () => {
  // 直接取CKEditor的原始HTML
  const rawHtml = editorRef.current.getData();
  // 直接存到Firebase，不要转义
  await firebase.firestore()
    .collection('your-collection')
    .doc('your-doc-id')
    .set({ content: rawHtml }, { merge: true });
};

如果之前的代码里有手动转义的逻辑，赶紧去掉——Firebase会自动处理字符串里的特殊字符，不需要你额外操作。

2. 渲染时用React的dangerouslySetInnerHTML解析HTML #

React为了安全，默认会把所有文本内容转义，所以直接渲染取到的内容会显示纯文本标签。这时候需要用dangerouslySetInnerHTML告诉React："我信任这段HTML，直接渲染它"。

示例代码：

// 假设从Firebase获取到的内容存在content变量里
<div dangerouslySetInnerHTML={{ __html: content }} />

重要提醒：XSS安全风险 #

如果你的内容来自不可信用户（比如公开投稿），直接用dangerouslySetInnerHTML会有XSS攻击风险。建议用DOMPurify库先净化HTML，过滤掉恶意脚本和标签：

import DOMPurify from 'dompurify';

// 渲染前先净化
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />

3. 修复已经存在于Firebase的双重转义数据 #

如果数据库里已经存了一堆转义过的内容，你需要写个脚本把它们反转义回来。比如：

// 可以在本地Node环境或者Firebase Functions里运行这个脚本
const fixExistingContent = async () => {
  const db = firebase.firestore();
  const docsSnapshot = await db.collection('your-collection').get();
  
  for (const doc of docsSnapshot.docs) {
    const oldContent = doc.data().content;
    // 双重反转义：先把&amp;lt;转成&lt;，再转成<
    const fixedContent = decodeURIComponent(decodeURIComponent(oldContent));
    await doc.ref.update({ content: fixedContent });
  }
};

// 执行脚本
fixExistingContent().then(() => console.log("数据修复完成"));

总结一下 #

问题的核心就是保存时多做了一次转义，加上React的自动转义，导致标签变成了纯文本。按上面的步骤：停止额外转义、用dangerouslySetInnerHTML渲染、修复旧数据，就能解决显示问题啦。

内容的提问来源于stack exchange，提问作者Krzysiek Wąsowicz