Angular Firestore带Where子句的集合查询及Promise转换问题

嘿，我来帮你理清楚这个问题的来龙去脉，以及怎么解决它～

首先，你遇到了两个核心困扰：

• 原本的SnapshotChanges()会多次发射数组，只有最后一次是包含指定groupId下所有数据的完整数组；
• 尝试转成Promise后，where子句好像没生效，返回了所有分组的数据。

为什么Promise版本会返回所有数据？ #

看你写的Promise代码，问题出在.ref的调用上：

getImageInfosWIds(bathroomGroupId: string): Promise<QuerySnapshot> {
  return this.afs.collection(this.bathroomImagesLocation, ref => ref.where("groupId", "==", bathroomGroupId))
    .ref
    .get();
}

当你调用.ref时，实际上是获取了原始的Firestore集合引用，并没有正确带上你定义的查询条件。AngularFire的collection方法返回的是AngularFirestoreCollection，直接调用它的get()方法（不需要.ref）才能正确应用查询过滤。修正后的Promise版本应该是这样：

getImageInfosWIds(bathroomGroupId: string): Promise<ImageUploadWId[]> {
  return this.afs.collection<ImageUpload>(this.bathroomImagesLocation, ref => 
    ref.where('groupId', '==', bathroomGroupId)
  ).get().then(querySnapshot => {
    // 把查询结果转换成你需要的ImageUploadWId数组
    return querySnapshot.docs.map(doc => {
      const data = doc.data();
      const imageUpload = new ImageUploadWId();
      imageUpload.set(doc.id, data);
      return imageUpload;
    });
  });
}

这样就能正确返回仅属于指定groupId的数据了。

更适合你的方案：Observable + take(1) #

不过你提到数据变更频率低，且需要基于返回数据执行删除操作——其实完全没必要转成Promise。直接在原Observable上加上take(1)操作符，就能只获取一次最新的完整数据（也就是你需要的最后一个数组），代码还更简洁，这也是你最终采用的方案，我再帮你梳理下：

最终可行的代码（优化版） #

// 保留Observable查询，用pipe处理数据转换
getImageInfosWIdsObservable(bathroomGroupId: string): Observable<ImageUploadWId[]> {
  return this.afs.collection(this.bathroomImagesLocation, ref => 
    ref.where('groupId', '==', bathroomGroupId)
  ).snapshotChanges()
  .pipe(
    map(actions => actions.map(a => {
      const data = a.payload.doc.data();
      const documentId = a.payload.doc.id;
      const imageUpload = new ImageUploadWId();
      imageUpload.set(documentId, <ImageUpload>data);
      return imageUpload;
    }))
  );
}

// 调用时用take(1)只取一次数据，自动取消订阅
onDeleteGroup(groupId: string) {
  this.bathroomGroupService.getImageInfosWIdsObservable(groupId)
    .pipe(take(1))
    .subscribe(data => {
      console.log(data[0].groupId);
      // 在这里执行你的删除逻辑
      data.forEach(imageUpload => {
        // 比如删除对应的存储文件或Firestore文档
      });
    });
}

额外避坑提醒：重复订阅导致的多余数组 #

你最后提到如果仍出现额外数组，可能是其他地方订阅了同一集合但未取消订阅——这确实是Angular + RxJS开发中很容易踩的坑。Observable每次订阅都会触发新的数据流，所以要确保所有订阅都正确收尾：

• 用take(1)、first()这类操作符，订阅一次后自动取消；
• 或者在组件的ngOnDestroy生命周期钩子中，手动调用订阅对象的unsubscribe()方法。

这样就能确保你只拿到一次完整的目标数据，不会出现多余的数组啦。

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