react-render-html渲染react-quill富文本时报undefined.length错误

出现这个错误的本质是首次渲染阶段，renderHTML 函数接收到了值为 undefined 的入参。
完整逻辑链：

• 组件初始化时Product状态默认是空对象{}，此时访问Product.desc拿到的值是undefined
• react-render-html依赖的底层HTML解析器parse5没有做入参空值校验，拿到undefined之后直接尝试读取待解析内容的length属性，就触发了Cannot read property 'length' of undefined的报错
• 你测试时直接输出{Product.desc}不报错，是因为React本身的文本渲染逻辑自带空值兜底，哪怕拿到undefined也会转成空字符串展示，不会触发第三方解析器的底层异常。而直接输出文本会展示原始HTML代码，是因为React默认会对所有嵌入的字符串做XSS转义，把HTML标签当纯文本渲染，这是React自带的安全防护机制。

1. 最快修复：入参空值兜底 #

不要把可能为undefined的富文本字段直接传给renderHTML，加一层空值判断，确保传给解析器的永远是合法字符串：
将原代码中的渲染段：

<div>{renderHTML(Product.desc)}</div>

修改为：

// 当desc不存在时传空字符串，避免undefined传入解析器
<div>{renderHTML(Product.desc || "")}</div>

这个修改可以直接解决首次渲染的报错问题，等后续useEffect拿到props.detail更新Product状态后，就会正常解析渲染富文本内容。

2. 更稳定的无依赖替代方案 #

react-render-html属于长期停更的第三方库，除了空值报错之外还存在不少解析兼容问题。如果你的富文本内容是自己通过react-quill生成、从自有数据库拉取的可信内容，完全不需要引入这个第三方库，可以直接用React原生的HTML渲染能力实现相同效果，兼容性和稳定性更好：
将上述渲染节点替换为原生API实现：

<div 
  className="rich-text-wrap"
  // 告知React这部分是可信HTML，不需要做转义渲染
  dangerouslySetInnerHTML={{ __html: Product.desc || "" }} 
/>

这种实现的优势：

• 不依赖底层第三方HTML解析器，从根源上避免parse5类的空值报错
• 渲染性能比第三方解析库更高，还原的富文本样式和react-quill生成的内容完全一致
• 内置空值兜底，初始加载阶段不会抛出异常

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