React/Next.js validateDOMNesting错误：<li>不能嵌套<li>求助

问题根源 #

HTML规范明确禁止<li>直接作为另一个<li>的子元素，必须通过<ul>或<ol>包裹子列表项，否则会触发DOM嵌套验证警告。

排查与修复步骤 #

• 定位嵌套位置
  查看错误调用栈里的组件路径，锁定Top组件中生成嵌套<li>的代码段。重点检查列表渲染逻辑（比如map循环生成列表项的部分），确认是否存在<li>内部直接返回<li>的情况。

• 修正结构示例
  错误代码（触发警告）：

  <li>
    父列表项内容
    <li>子列表项内容</li>
  </li>
  

  改成符合规范的结构：

  <li>
    父列表项内容
    <ul>
      <li>子列表项内容</li>
    </ul>
  </li>
  

• 验证修复效果
  修改后重新运行项目，检查控制台是否仍有该警告。若警告存在，继续排查是否有其他未修正的嵌套<li>。

额外提示 #

• 若使用UI组件库的列表组件，检查是否错误地在组件内部嵌套了原生<li>或同类列表组件，需按照组件库文档调整结构。
• 可通过浏览器开发者工具的Elements面板，找到页面中嵌套的<li>元素，反向定位到对应组件代码。

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