Next.js使用dangerouslySetInnerHTML移除p标签后内容不显示如何解决

在Next.js项目中使用dangerouslySetInnerHTML渲染富文本内容时，需求是移除渲染结果中的<p>标签，完成对应代码修改后页面重载，目标内容完全无法渲染展示，对应实现代码截图如下：

内容渲染空白基本都是替换逻辑异常，导致传给dangerouslySetInnerHTML的__html值不合法，常见触发场景：

• 未做值兜底，直接对undefined/null类型的原始内容调用replace方法，抛出JS错误中断组件渲染
• 正则规则写错，比如用了贪婪匹配模式、漏写全局匹配标记，替换时把整个内容替换成了空字符串
• 替换逻辑的执行时机错误，拿不到原始内容变量，最终传给__html的值是空值

先做值合法性校验，再做标签替换，不要直接写裸的正则替换逻辑，可直接复用下面的代码：

/**
 * 移除富文本中的p标签，保留标签内部内容
 * @param {string} rawContent 原始富文本内容
 * @returns {string} 处理后的安全字符串
 */
const processContent = (rawContent) => {
  // 非字符串内容直接返回空串，避免调用replace报错
  if (typeof rawContent !== 'string') return ''
  // 匹配所有p标签（包含带class、style等属性的p开标签），仅移除标签本身
  return rawContent
    .replace(/<p[^>]*>/g, '')
    .replace(/<\/p>/g, '')
}

// 组件内使用示例
export default function ArticleContent({ articleData }) {
  const htmlContent = processContent(articleData?.content)
  return (
    <div className="article-content" dangerouslySetInnerHTML={{ __html: htmlContent }} />
  )
}

如果替换后依然无法渲染，按以下顺序定位问题：

• 打开浏览器控制台查看报错，优先排查是否存在Cannot read properties of undefined (reading 'replace')类的类型错误
• 在替换逻辑前后加日志，分别打印原始内容、处理后内容，确认原始内容存在、处理后没有变成空串
• 如果是Next.js App Router下的服务端组件，确认传给__html的值是普通字符串，不是组件实例、Promise等非字符串类型

避坑提醒：不要写类似/<p>.*<\/p>/g的贪婪匹配正则，这种规则会把第一个<p>到最后一个</p>之间的所有内容全部替换为空，直接导致整块内容消失。

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