已校验undefined仍报Cannot read properties of undefined错误如何解决

运行以下代码时抛出TypeError: Cannot read properties of undefined (reading 'latestDocDate')错误：

if (this.state.latestDocDate === undefined || this.props.docRow[0].docDate > this.state.latestDocDate) {

已知this.state.latestDocDate可能为undefined，原以为条件中this.state.latestDocDate === undefined的判断已经覆盖了该场景，需要定位问题并修复。

这个报错和latestDocDate本身是否为undefined没有关系。JS的属性读取规则是：当你访问obj.prop时，只要obj是undefined或者null，不管prop是什么，都会直接抛出"读取undefined属性"的类型错误。你这里的问题是执行this.state.latestDocDate时，this.state本身就是undefined，代码在取属性的瞬间就报错了，根本走不到后面=== undefined的判断逻辑。
除此之外你的代码还有两处同类隐患：this.props.docRow可能为undefined、this.props.docRow[0]可能不存在，这两个位置如果不做校验，后续也会触发同类报错。

• 优先校验上层对象是否存在，再读取深层属性，不要直接链式读取可能不存在的对象：

if (
  // 从上到下逐层校验存在性
  !this.state ||
  this.state.latestDocDate === undefined ||
  !this.props.docRow ||
  !this.props.docRow[0] ||
  this.props.docRow[0].docDate > this.state.latestDocDate
) {
  // 写入业务逻辑
}

• 如果项目环境支持ES2020的可选链操作符，可以用更简洁的写法彻底规避这类错误，可选链会在左侧值为null/undefined时直接短路返回undefined，不会继续向后读取属性抛错：

const latestDocDate = this.state?.latestDocDate
const currentDocDate = this.props?.docRow?.[0]?.docDate

if (latestDocDate === undefined || currentDocDate > latestDocDate) {
  // 写入业务逻辑
}

• 额外排查React类组件的初始化逻辑：正常类组件在constructor中绑定state后，this.state不应该为undefined，如果出现这个情况，需要检查是否存在constructor外直接覆盖this.state、或者state初始化完成前就执行了这段判断逻辑的问题，调整代码执行时机即可。

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