本文详解 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免费学习笔记（深入）”；
