Skip to content

TypeError：读取 null 的属性

错误信息

                Cannot read properties of null (reading 'x')

快速摘要

你对一个值为 `null` 的变量取属性，比如 `element.value` 中 `element` 是 `null`（DOM 没找到），就报错。

为什么发生

  • document.querySelector 没找到元素，返回 null，继续访问属性就报错

  • API 返回的某个字段是 null，被当成对象使用

  • 变量被显式设为 null，后续代码却假设它有值

最小示例

✗ 错误代码
const btn = document.querySelector(".missing");
btn.addEventListener("click", () => {});
✓ 修复代码
const btn = document.querySelector(".missing");
btn?.addEventListener("click", () => {});

选择器 .missing 没匹配到元素，btn 是 null，调用 addEventListener 就抛错。用 btn?.addEventListener 安全调用。

如何诊断

  • 阅读错误信息中括号里的属性名，定位访问失败的位置

  • 在出错前打印变量，确认是否为 null

  • 对 DOM 操作，确认选择器是否真的匹配到了元素

如何修复

  • 使用可选链：element?.value，element 为 null 时安全返回 undefined

  • 访问前判空：if (element !== null) { ... }

  • 对 DOM 查询结果做存在性检查后再操作

如何预防

  • 对可能为 null 的值统一使用可选链 ?.

  • 在函数文档中明确标注哪些返回值可能为 null

相关资源

相关术语

相关课程

相关练习

← 返回语言