使用Firestore与AngularFire2合并评论及用户信息Observable失败求助

我来帮你解决这个问题，你的核心需求是把Firestore中comments集合的每条评论，和对应的users文档信息（通过uid关联）合并成一个包含完整信息的数据流。咱们先分析你现有代码的问题，再给出正确的实现方案。

现有代码的问题 #

1. users$的实现错误：
   你在switchMap里返回了comments.map(comment => ...)，这会生成一个Observable[]（每个元素是获取单个用户的Observable），但switchMap要求返回的是单个Observable，而不是Observable数组，所以这个写法根本无法正确触发用户数据的请求。

2. zip操作符不合适：
   zip是按索引位置一一合并两个Observable的发射值，但这里你需要的是把每条评论和它对应的用户信息绑定，而不是把整个评论数组和用户数组做简单的合并。而且由于users$本身实现错误，它根本不会发射有效数据，zip自然也无法工作。

正确的实现方案 #

我们可以直接在评论数据流的管道里，对每条评论单独获取对应的用户信息，然后合并成包含用户数据的评论对象，最后用forkJoin等待所有用户请求完成后，返回完整的评论数组。

完整代码示例

首先可以定义对应的类型（可选，但能提升代码可读性）：

// 定义评论和用户的接口
interface Comment {
  uid: string;
  content: string;
  createdAt: firebase.firestore.Timestamp; // 或者根据你的实际类型调整
  // 其他评论字段...
}

interface User {
  displayName: string;
  photoURL: string;
  // 其他用户字段...
}

然后实现合并逻辑：

import { switchMap, forkJoin, map, of } from 'rxjs';
import { AngularFirestore } from '@angular/fire/compat/firestore';

// 在你的组件/service里
constructor(private afs: AngularFirestore) {}

// 获取带用户信息的评论流
getCommentsWithUserInfo$() {
  return this.afs.collection<Comment>('comments').valueChanges().pipe(
    switchMap(comments => {
      // 处理空评论列表的情况，直接返回空数组
      if (comments.length === 0) {
        return of([]);
      }

      // 为每条评论创建一个Observable：获取用户数据并和评论合并
      const commentWithUserObservables = comments.map(comment => {
        return this.afs.doc<User>(`users/${comment.uid}`).valueChanges().pipe(
          map(user => ({
            ...comment,
            // 把需要的用户字段合并到评论对象里
            displayName: user?.displayName,
            photoURL: user?.photoURL
            // 如果你需要整个用户对象，也可以写成：user: user
          }))
        );
      });

      // 用forkJoin等待所有用户请求完成，返回合并后的评论数组
      return forkJoin(commentWithUserObservables);
    })
  );
}

代码解释 #

• switchMap：当comments集合有更新（新增/修改/删除评论）时，会取消之前的用户请求，重新发起新的用户数据请求，保证数据流的实时性。
• forkJoin：等待所有获取用户的Observable都完成后，把每个Observable的结果（合并后的评论对象）组成数组发射出去，适合这种一次性获取多个关联文档的场景。
• map：将单个评论和对应的用户信息合并成一个新对象，你可以根据需求选择合并整个用户对象，或者只提取displayName、photoURL等需要的字段。

额外说明 #

如果你的用户文档也需要实时更新（比如用户修改了头像或昵称），这个方案同样支持：因为valueChanges()会监听用户文档的变化，当用户信息更新时，对应的评论条目会自动同步更新。

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