TS开发Firebase Auth项目报错Cannot read property 'addEventListener' of null如何修复

这个报错的根本原因是尝试调用addEventListener方法的DOM对象为null，可按以下优先级排查修复：

• 检查代码执行时序：如果脚本在DOM节点渲染完成前就执行，会导致获取节点的方法返回空值。可以将脚本放在HTML文件body标签的最末尾，或者把事件绑定逻辑包裹在DOMContentLoaded事件回调中，示例代码：

document.addEventListener('DOMContentLoaded', () => {
  // 你的获取节点、绑定事件逻辑写在这里
})

• 检查节点选择器是否正确：确认你写的querySelector/getElementById等方法的入参，和页面实际DOM的ID、类名完全匹配，注意拼写、大小写问题。你可以在浏览器控制台直接执行你的节点获取代码，验证是否能拿到对应的元素。
• 增加非空判断规避报错：如果你的目标节点是动态渲染的（比如依赖某个接口返回、状态变化才会出现），可以在绑定事件前先判断节点是否存在，TypeScript 也支持可选链写法简化判断，示例代码：

const targetNode = document.querySelector('#your-element-id')
// 普通判断写法
if (targetNode) {
  targetNode.addEventListener('click', yourHandler)
}
// 可选链简化写法
targetNode?.addEventListener('click', yourHandler)

内容的提问来源于stack exchange，提问作者Daniel Radosa