如何在 JavaScript 中正确实现嵌套评论的递归渲染

本文详解 javascript 递归渲染嵌套评论时常见的 dom 元素未就绪导致的 `cannot set properties of NULL` 错误，通过调整 html 插入与递归调用的执行顺序，确保父容器在子级递归前已存在于 dom 中。

在实现树形结构（如嵌套评论、多级菜单）的前端渲染时，递归函数是常见方案。但一个极易被忽视的关键点是：DOM 节点必须在子级递归调用发生前已被插入文档。否则，当 findChildComment 尝试通过 document.querySelector(‘#cm_reply_view${parentId}’) 访问目标容器时，该元素尚未生成，返回 null，进而触发 Uncaught TypeError: Cannot set properties of null (setting ‘innerhtml’)。

? 根本原因分析

原代码中，findAllComment 在拼接完所有 HTML 字符串后一次性写入 .cm_list，但紧接着立即对 row.children 发起递归；而 findChildComment 同样先递归再写入 HTML —— 这导致：

• 父级

  尚未被渲染到页面；

• 子级递归却试图向这个不存在的 DOM 节点写入内容；
• document.querySelector(…) 返回 null，.innerHTML = … 报错。

✅ 正确实现：先挂载，再递归

需严格遵循「先插入当前层级 HTML，再递归处理子节点」原则。以下是关键修复后的代码逻辑：

✅ 修复 findAllComment()（主入口）

success: function (response) {   if (!response.result.data.length) return;    let commentHtml = '';   // Step 1: 仅拼接顶层评论 HTML（不含子级递归）   response.result.data.forEach(row => {     commentHtml += `       
         
           ${row.account.nickname}                      ${dayjs(row.createdDateTime).format('YYYY-MM-DD HH:mm')}         
         
           ${row.content}         
       
       
       
       
     `;   });    // Step 2: ✅ 立即挂载顶层 HTML → 确保所有 cm_reply_viewXXX 容器已存在   document.querySelector('.cm_list').innerHTML = commentHtml;    // Step 3: ✅ 此时才开始递归渲染子评论（依赖上一步生成的 DOM）   response.result.data.forEach(row => {     if (Array.isArray(row.children) && row.children.length > 0) {       row.children.forEach(child => {         findChildComment(row.id, child);       });     }   }); }

✅ 修复 findChildComment(parentId, child)

function findChildComment(parentId, child) {   const idForInnerHtml = `#cm_reply_view${parentId}`;   const targetEl = document.querySelector(idForInnerHtml);    // ⚠️ 安全检查：避免因模板异常或数据问题导致 targetEl 为 null   if (!targetEl) {     console.warn(`Target element ${idForInnerHtml} not found. Skip rendering child comment ${child.id}.`);     return;   }    let commentHtml = `     
       
         ${child.account.nickname}                  ${dayjs(child.createdDateTime).format('YYYY-MM-DD HH:mm')}       
       
         ${child.content}       
     
     
     
     
   `;    // ✅ 先写入当前层级 HTML（创建子容器）   targetEl.innerHTML = commentHtml;    // ✅ 再递归处理孙子节点（此时 cm_reply_view${child.id} 已存在）   if (Array.isArray(child.children) && child.children.length > 0) {     child.children.forEach(grandchild => {       findChildComment(child.id, grandchild);     });   } }

? 关键注意事项

• 禁止 async: false：jquery 的同步 ajax 已被现代标准弃用，且阻塞主线程。应改用 fetch 或 axios + async/await 实现异步链式调用。
• DOM 就绪时机：确保 window.onload 或 DOMContentLoaded 触发后执行 findAllComment()，避免查询 .cm_list 失败。
• 空值防御：始终校验 document.querySelector() 返回值，避免静默崩溃。
• 性能优化建议：深层嵌套时，可考虑使用 DocumentFragment 批量插入，减少重排重绘；或改用虚拟 DOM 方案（如 react/vue）管理复杂树结构。
• 服务端数据规范：确保后端返回的 children 字段恒为数组（空数组 [] 而非 null 或 undefined），简化前端判断逻辑。

通过以上调整，递归渲染将严格遵循 DOM 生命周期，彻底规避 null.innerHTML 类型错误，稳定支撑任意深度的嵌套评论展示。

立即学习“Java免费学习笔记（深入）”；