RxJS从Firestore获取关联数据后排序遇results未定义问题求助

问题根源 #

你遇到的核心问题是嵌套订阅导致的异步时序问题：当你在外层map里对每个用户发起results请求并订阅时，这个订阅是异步执行的——外层的用户数组流会直接返回还没赋值results属性的用户对象，后续的排序map在执行时，user.results自然还没被赋值，所以是undefined。

解决方案：用RxJS高阶算子处理嵌套Observable #

我们需要用RxJS的高阶映射算子结合forkJoin来等待所有用户的results请求完成，确保拿到完整的用户数据后再进行排序/过滤操作。重构后的代码如下：

getChampionshipResults(minimumCompetionCount: number): Observable<User[]> {
  return this.afs.collection<User>('users').valueChanges().pipe(
    // 把用户数组转换成包含用户+results的Observable数组
    switchMap(users => {
      // 为每个用户创建Observable：获取其results并合并到用户对象
      const userWithResultsObservables = users.map(user => {
        return this.afs.collection<Result>('results', ref => ref
          .where('userUid', '==', user.uid)
          .orderBy('position', 'asc')
          .limit(minimumCompetionCount)
        ).valueChanges().pipe(
          take(1),
          // 合并results到新用户对象，避免修改原数据
          map(results => ({ ...user, results }))
        );
      });

      // 等待所有用户的results请求完成，返回完整的用户数组
      return forkJoin(userWithResultsObservables);
    }),
    // 现在可以安全排序了，所有user都已带有results属性
    map(users => {
      return users.sort((a, b) => {
        // 示例：按用户的比赛结果数量降序排序
        return b.results.length - a.results.length;
        // 你可以替换成实际需要的排序逻辑，比如按最好名次排序
      });
    }),
    tap(el => console.log(el)) // RxJS 6+版本用tap替代原do算子
  );
}

关键细节解释 #

• switchMap：替代外层的map，它会把当前的用户数组流转换成新的Observable流（由forkJoin返回的完整用户数组）；当原用户流发出新值时（比如Firestore数据更新），会取消之前的所有results请求，重新发起新请求，保证数据的最新性。
• forkJoin：接收一个Observable数组，等待所有Observable都完成后返回结果数组，确保每个用户的results都已经被获取并赋值。
• 不可变数据实践：用{ ...user, results }创建新用户对象，而非直接修改user.results = results，避免意外副作用，也符合现代前端的最佳实践。
• RxJS版本适配：如果你的项目用RxJS 6及以上，必须用pipe组合算子，且原do算子已重命名为tap。

额外优化建议 #

如果minimumCompetionCount是用来筛选至少完成指定次数比赛的用户，可以在forkJoin之后添加过滤逻辑：

map(users => users.filter(user => user.results.length >= minimumCompetionCount)),

这样就能直接返回符合条件的用户，再进行排序。

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