Angular仪表板访问报错：无法读取null的'branch'属性

云原生阿岚

2026-7-26

问题原因分析

1. localStorage中无有效用户数据

当window.localStorage.getItem('users')返回null时，你使用非空断言users!强制跳过空值检查，直接执行JSON.parse(users!)，此时JSON.parse(null)会返回null，导致jsonUsers为null。后续访问jsonUsers.branch自然触发Cannot read properties of null (reading 'branch')错误。

2. 接口定义与代码逻辑不匹配

你的Users接口中branch是Branch[]类型（数组），但代码中直接访问jsonUsers.branch.id——数组本身没有id属性，即使jsonUsers不为null，这里也会出现Cannot read properties of undefined (reading 'id')错误。

3. 冗余的JSON.parse调用

代码中console.log("data: ", JSON.parse(jsonUsers.branch.id));是多余操作，jsonUsers已经是解析后的对象，jsonUsers.branch.id若存在也是具体值，再次解析毫无意义，反而会引发额外错误。

修复建议

先处理空值情况：解析前检查localStorage数据是否存在，避免非空断言的风险：

getUserData() {
    let users = window.localStorage.getItem('users');
    if (!users) {
        // 处理数据不存在的情况，比如返回默认值或抛出明确错误
        throw new Error('用户数据未找到');
    }
    let jsonUsers: Users = JSON.parse(users); 
    // 因branch是数组，需根据业务取对应元素的id，示例取第一个分支
    if (!jsonUsers.branch || jsonUsers.branch.length === 0) {
        throw new Error('用户无关联分支');
    }
    console.log("分支ID: ", jsonUsers.branch[0].id);
    return jsonUsers.branch[0].id;
}