如何避免访问空数组内嵌套数据时报错，且嵌套存在时可正常取值？

你当前的可选链用法不完整：只在houses后加了可选链，当houses?.[0]返回undefined后，代码依然会尝试读取undefined.person，所以会抛出错误。可选链只会对紧邻的属性访问做安全拦截，不会自动处理后续的链式调用。

在数组下标访问后也补充可选链即可，完整代码如下：

var data = {
  city: {
    street: {
      houses: []
    }
  }
}

alert(data.city.street.houses?.[0]?.person);

修改后只要链式访问中任意一个节点不存在，整个表达式就会直接返回undefined，不会抛出报错，符合你要的效果。

如果运行环境不支持ES2020的可选链语法，也可以用逻辑与的兼容写法实现同样效果：

alert(data && data.city && data.city.street && data.city.street.houses && data.city.street.houses[0] && data.city.street.houses[0].person);

补充说明：如果修改可选链写法后依然报错，请确认运行环境是否支持ES2020及以上语法，低版本运行环境可以使用上面的逻辑与兼容写法，或者通过Babel转译代码适配低版本环境。

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