Angular Material MatTable链式调用AngularFire多查询时filteredData undefined报错

问题原因&解决方法 #

1. 缺失Firestore复合查询索引 #

Firestore对同时包含where条件和orderBy排序的复合查询有强制要求：必须提前为该查询组合创建专属索引，单个where/orderBy查询不需要索引即可执行。
如果未创建对应索引，AngularFire调用snapshotChanges()时会直接抛出错误，若你未在订阅逻辑中做错误捕获和返回值校验，会直接把undefined赋值给MatTableDataSource的data属性，导致_filterData方法接收到的入参data为undefined，访问length属性时触发报错。

排查方式：在查询的订阅逻辑中添加错误回调，若控制台打印出Firestore索引缺失错误，直接点击错误附带的索引创建跳转链接，在Firebase后台确认创建即可，索引创建完成后查询即可正常返回数据。

2. 数据赋值逻辑缺少空值校验 #

即使索引正常，复合查询首次返回、或者无匹配数据时，也可能存在返回空值的情况，你需要在赋值给MatTableDataSource前做非空校验，同时在初始化数据源时设置默认空数组：

// 初始化时指定默认空数组，避免初始状态data为undefined
dataSource = new MatTableDataSource<any>([]);

// 数据请求逻辑增加空值判断和错误捕获
this.db
  .collection(uid, (ref) => ref.where('year', '==', '1954').orderBy('lastName'))
  .snapshotChanges()
  .pipe(
    // 把snapshot返回的操作对象转换为实际业务数据
    map(actions => actions.map(a => a.payload.doc.data()))
  )
  .subscribe({
    next: (res) => {
      // 非空才赋值，空值则赋值空数组
      this.dataSource.data = res || [];
    },
    error: (err) => console.error('查询失败：', err)
  })

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