如何使用AngularFire查询Firebase中集合及对应子集合数据

Firestore 本身不支持单次查询直接嵌套返回子集合数据，我们可以通过 RxJS 操作符组合数据流的方式实现需求，同时保留全链路响应式更新能力，具体实现如下：

1. 前置调整：获取 Profile 文档 ID #

你当前使用的valueChanges()默认不会返回文档的 ID，而查询子集合需要用到{uid}参数，所以先调整查询逻辑拿到每个 profile 的唯一ID。

2. 组合 Profile 与 Roles 数据流 #

通过 RxJS 的switchMap和combineLatest操作符，将每个用户的基础数据和其 roles 子集合的响应式流组合到一起，实现整体数据的实时更新。

完整代码示例 #

首先导入依赖的操作符：

import { switchMap, map } from 'rxjs/operators';
import { combineLatest } from 'rxjs';

定义扩展的用户类型（可根据业务需求调整）：

// 扩展原有User类型，新增uid和roles字段
interface AppUser extends User {
  uid: string;
  // 存储角色ID数组，也可定义为Record<string, boolean>类型方便快速判断角色
  roles: string[];
}

组件中获取数据的逻辑：

constructor(private firestore: AngularFirestore) {
  this.users$ = this.firestore.collection<User>('profiles').snapshotChanges().pipe(
    // 映射获取每个profile的uid和基础字段
    map(profileSnapshots => 
      profileSnapshots.map(snap => ({
        uid: snap.payload.doc.id,
        ...snap.payload.doc.data()
      } as AppUser))
    ),
    // 为每个用户关联roles子集合的监听流
    switchMap(profiles => {
      const userStreamList = profiles.map(profile => {
        // 查询当前用户的roles子集合，通过idField参数获取角色文档ID
        return this.firestore.collection(`profiles/${profile.uid}/roles`).valueChanges({idField: 'roleId'}).pipe(
          map(roles => {
            // 提取角色ID数组，你也可以在这里处理成其他业务需要的格式
            const roleIds = roles.map(role => role.roleId);
            return {
              ...profile,
              roles: roleIds
            } as AppUser
          })
        )
      });
      // 组合所有用户的流，返回统一的可观察对象
      return combineLatest(userStreamList);
    })
  );
}

3. 模板中使用 #

直接在原有*ngFor循环的基础上即可判断角色：

<tr *ngFor="let user of users$ | async">
  <td>{{ user.displayName }}</td>
  <td>{{ user.email }}</td>
  <!-- 新增角色判断列 -->
  <td>
    <span *ngIf="user.roles.includes('admin')">管理员</span>
    <span *ngIf="user.roles.includes('user')">普通用户</span>
  </td>
</tr>

可选优化方案 #

如果你的 profiles 集合数据量较大（超过100条），大量子集合监听可能会带来性能开销，可以考虑通过云函数实现角色数据冗余：

• 在 profiles 文档中新增只读的roles字段
• 编写云函数监听roles子集合的增删改操作，自动同步更新父文档的roles字段
• 调整权限规则禁止客户端直接修改该冗余字段，即可实现一次查询拿到所有数据，同时保留原有的 roles 子集合权限隔离能力

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