TypeScript报错Cannot read property of undefined(reading 'domain') 解决方案咨询

报错信息 #

遇到TypeScript报错：Cannot read property of undefined (reading 'domain')，需排查代码中的空值访问、类型匹配及逻辑错误。

相关数据与代码 #

JSON数据 #

[{
    "cnl":1233,
    "record": [{
        "querName": "style-Query",
        "data":{"name":"james"}
    }]
}]

数据模型 #

export interface cnlModel{
  id:string,
  user:string,
  record:[querName:string]
}

HTML模板 #

<div>
<input type="text" [(ngModel)]= "cnlDataFilter">
<button (click)= "getDataByCnl()">search </button>
</div>
<div *ngIf= "filterreddata">
show data
</div>

TypeScript组件过滤代码 #

@Component({ templateUrl: './plm.component.html',})
private _cnlDataFilter = '';
set cnlDataFilter (value:string) { this._cnlDataFilter = value; }
get cnlDataFilter(){ return this._cnlDataFilter; }
public getDataByCnl(){
  this.plmService.getCnlData(this._cnlDataFilter).subscribe({
    next:(data) => {
      this.filterreddata = data;
      const modified = this.filterreddata.map(function(ComparisonResult) {
        ComparisonResult.record = ComparisonResult.record.filter(x => x.querName === "style-Query");
        return ComparisonResult;
      });
      console.log(modified)
      let and = this.filterreddata.filter((I:any)=>i.querName === "style-Query")
    }
  })
}

问题分析与解决方案 #

1. 数据模型定义错误 #

当前cnlModel存在两个关键问题：

• record:[querName:string]是无效语法，无法正确描述数组结构；
• 接口声明的id、user字段在返回的JSON中不存在，类型不匹配会引发潜在错误。

修正后的模型：

// 定义record子项的接口
export interface RecordItem {
  querName: string;
  data?: { name: string };
}

export interface cnlModel{
  cnl: number; // 对应JSON中的cnl字段
  record: RecordItem[];
  // 可选字段，避免后端未返回时类型报错
  id?: string;
  user?: string;
}

2. 过滤代码逻辑与语法错误 #

• 变量大小写错误：最后一行过滤代码中，参数为I，但回调内使用了小写i，导致i未定义，这是引发Cannot read property of undefined的直接原因；
• 逻辑错误：filterreddata是数组，每个元素本身没有querName字段，该字段属于record数组的子项，原过滤逻辑完全不成立。

修正后的过滤代码：

// 先声明filterreddata变量
filterreddata: cnlModel[] = [];

public getDataByCnl(){
  this.plmService.getCnlData(this._cnlDataFilter).subscribe({
    next:(data: cnlModel[]) => {
      this.filterreddata = data;
      // 过滤每个item的record数组，保留指定querName的项
      const modified = this.filterreddata.map(item => {
        // 可选链+默认值，避免record为undefined时报错
        item.record = item.record?.filter(x => x.querName === "style-Query") || [];
        return item;
      });
      console.log(modified);
      // 如需筛选出包含指定querName的record的父项
      const filteredItems = this.filterreddata.filter(item => 
        item.record?.some(x => x.querName === "style-Query")
      );
      console.log(filteredItems);
    }
  })
}

3. 空值安全处理 #

使用可选链操作符?.访问嵌套属性，避免因某个层级为undefined/null导致的报错；配合|| []确保即使record为空也能返回空数组，保证后续逻辑正常执行。

4. 模板绑定的变量声明 #

确保组件类中正确声明filterreddata变量，避免模板中*ngIf判断时出现未定义问题。

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