Vue.js出现TypeError:Cannot read properties of undefined(reading 'id_area')如何解决

• 报错的核心是代码直接访问了可能为undefined的对象属性，错误提前触发在关联ID查找阶段，而非最后的字段渲染阶段：
  • 当grupos中没有匹配row.id_grupo的项时，group为undefined，直接访问group.id_maquina就会抛出错误
  • 当group.id_maquina没有对应的maquinas项时，machine为undefined，直接访问machine.id_area就会触发你看到的Cannot read properties of undefined (reading 'id_area')报错
• 你此前仅在最后渲染machine.nome、area.nome的时候做了兜底，但前置的ID取值步骤没有做非空判断，所以组件渲染直接中断

推荐用ES6+的可选链操作符配合空值合并运算符修改代码，完美符合你无关联时展示-的需求，修改后的代码如下：

computed: {
    linhas () {
        return this.lista.map(row => {
            const group = this.grupos.find(g => g.id === row.id_grupo);
            // 可选链访问属性，对象不存在时直接返回undefined，不会抛错
            const machine = this.maquinas.find(m => m.id === group?.id_maquina);
            const area = this.areas.find(a => a.id === machine?.id_area);

            return ({
                href: {path: this.editRoute + row.id},
                cols: [
                    row.id,
                    row.tag,
                    row.descricao,
                    row.tipo === "ANALOGICA" ? "Analógica" : "Digital",
                    // 空值合并做兜底，只有值为undefined/null时展示-
                    group?.nome ?? "-",
                    machine?.nome ?? "-",
                    area?.nome ?? "-"
                ]
            });
        });
    }
},

如果你的项目环境不支持可选链语法，可以用逻辑与做兼容判断：

// 兼容写法示例
const machine = this.maquinas.find(m => m.id === (group && group.id_maquina));
const area = this.areas.find(a => a.id === (machine && machine.id_area));
// 对应字段兜底写法
group ? group.nome : "-",
machine ? machine.nome : "-",
area ? area.nome : "-"

• 可选链?.会在访问的对象为undefined/null时直接返回undefined，不会抛出错误
• 空值合并运算符??只有在左侧值为undefined/null时才返回右侧的默认值，比||更安全，不会把0、空字符串等合法值也替换成默认值

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