Angular 和 Firestore，查询未定义

Question

在将旧项目的代码更新到最新版本的 Angular 和 RxJs 之后，我确实尝试尽可能多地更新代码。

这里基本上是我的old code

但现在我收到了undefined 查询。

scrollInit(chatRoomUid: string, chatType: ChatType, reverse?: boolean, opts?: any) {
    this.query = {
      path: 'chat_room_messages',
      field: 'createdAt',
      limit: 20,
      reverse: reverse,
      prepend: false,
      ...opts
    };

    return this.userProvider.user$.pipe(
      switchMap((user: User) => {
        if (!user) return of([]);

        const first = this.afs.collection<ServerChatRoomMessage>(this.query.path, ref => {
          let cRef = ref.where('usersUid', 'array-contains', user.uid);
              cRef = cRef.where('chatRoomUid', '==', chatRoomUid);
              cRef = cRef.where('chatType', '==', chatType);
          return cRef
            .orderBy(this.query.field, this.query.reverse ? 'desc' : 'asc')
            .limit(this.query.limit);
        });

        console.log(first); # The first console log

        this.mapAndUpdate(first);

        this.data$ = this.data.asObservable().pipe(
          scan((acc, val) => {
            return this.query.prepend ? val.concat(acc) : acc.concat(val);
          })
        );
      })
    );
  }

如你所见，我用first 打电话给this.mapAndUpdate(first)

现在是mapAndUpdate()

private mapAndUpdate(collection: AngularFirestoreCollection) {
    if (this.done.value || this.loading.value) return;

    console.log(collection); # The second console log

    this.loading.next(true);

    return collection.snapshotChanges().pipe(
      tap(arr => {
        let values = arr.map(snap => {
          const data = snap.payload.doc.data();
          const doc = snap.payload.doc;
          return { ...data, doc };
        });

        values = this.query.prepend ? values.reverse() : values;

        this.data.next(values);
        this.loading.next(false);

        if (!values.length) this.done.next(true);
    })).pipe(take(1)).subscribe();
  }

我做了两个console.log 这是first 和second 的结果，它们是相同的，但还有另一个console.log 来自第一个undefined。

现在，当我转到我的 Angular 页面并调用上面旧代码示例中的内容时，我在控制台中得到了this error。

我尝试添加尽可能多的细节，但我不知道这个错误意味着什么。

Answer 1

您不会将任何内容返回到您的 switchMap。

return this.userProvider.user$.pipe(
  switchMap((user: User) => { ... })
);

这个 switchMap 操作符应该返回一些东西。考虑提供它，或者不使用 switchMap。