ReactJS开发聊天应用报Cannot read property 'appendChild' of null错误

直接触发报错的根因 #

• 你在JSX渲染部分定义的消息列表元素id为printmessage（单数，无s）：

  <ul id="printmessage"></ul>
  

• 但在identify_message方法里获取DOM元素时，写的是document.getElementById("printmessages")（复数，末尾带s）：

  document.getElementById("printmessages").appendChild(li)
  

  因为id字符串完全不匹配，getElementById找不到对应元素就会返回null，对null调用appendChild方法就会抛出你遇到的TypeError: Cannot read property 'appendChild' of null报错。

代码中其他需要修正的潜在问题 #

• 你现在用原生DOM操作修改元素display属性来控制登录页、聊天页的显隐，完全不符合React的状态驱动逻辑，很容易出现DOM还未挂载就被操作的空引用问题。应该在state中新增isLogin字段，初始值为false，登录成功时将其设为true，通过条件渲染控制聊天区域的显示，替代原生DOM修改样式的写法。
• 你在update_partner方法的每秒循环逻辑中，每次都会新建一个每2秒执行一次的identify_message定时器，长期运行会产生大量重复定时器，导致消息被重复处理、内存泄漏。应该将消息监听逻辑抽离，仅初始化一次定时器，避免嵌套创建循环。
• 你定义了handle_message方法用来同步输入内容，但没有把这个方法绑定到消息输入框的onChange事件上，输入框的内容也没有和state做双向绑定，当前发消息时永远会把初始的空格内容同步到firebase。
• 你在计算allkey时直接把两个字符串形式的随机key做parseInt相加，当key长度超过13位时parseInt会产生精度丢失，导致聊天通道key不匹配，收不到对方的消息。

最小化修复验证步骤 #

1. 统一id命名：把两处获取元素的代码里的printmessages改成printmessage，和JSX里的元素id保持完全一致，保存后刷新页面即可消除当前的appendChild报错。
2. 增加DOM存在性兜底：可以在调用appendChild之前先判断元素是否存在，写法参考：

   const msgContainer = document.getElementById("printmessage")
   if (!msgContainer) return
   msgContainer.appendChild(li)
   

   避免后续因为渲染时序问题再抛出同类空引用报错。

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