前端模板访问数组元素的fullname属性报TypeError错误是什么原因

• 首屏渲染时异步数据未就绪：前端模板的首次渲染时机通常早于后端接口异步返回数据的时机，此时item还未被赋值，或者item.data是空数组，item.data[0]取值为undefined。模板引擎直接渲染undefined值时不会抛出异常（通常输出空字符串），但尝试读取undefined的fullname属性时，就会触发该类型错误。
• 异常边界未处理：存在业务场景下item.data数组长度为0（比如过滤后无匹配数据、接口返回空列表），此时item.data[0]恒为undefined，读取属性必然报错。

如果模板引擎支持可选链运算符，可以直接用如下写法规避空值读取错误：

<div class="label">{{ item.data?.[0]?.fullname }}</div>

如果模板引擎不支持可选链，也可以用短路判断兼容：

<div class="label">{{ item.data && item.data[0] && item.data[0].fullname }}</div>

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