INTERNAL ASSERTION FAILED: AsyncQueue is already f

问题:

I have used promise inside the subscribe/observable as shown below. But it gives errors. can you tell me how to construct or design the code properly here?

async loginWithGoogle(): Promise<void> {
    const result = await this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    const userId: string = result.additionalUserInfo.profile.id;
    const userProfile: AngularFirestoreDocument<UserProfile> = this.fireStore.doc(`userProfile/${userId}`);
    const userProfiles: AngularFirestoreCollection<UserProfile> = this.fireStore.collection('userProfile/', ref => ref.where('email', '==', result.additionalUserInfo.profile.email));
    const userProfiles$: Observable<UserProfile[]> = userProfiles.valueChanges();

    userProfiles$.subscribe(async res => { // problem is here
      if (res.length == 0) {
        await userProfile.set({
          id: userId,
          email: result.additionalUserInfo.profile.email,
          creationTime: moment().format(),
          lastSignInTime: moment().format()
        });
      }
    });
  }

Stack 1:

core.js:1350 ERROR Error: FIRESTORE (4.7.0) INTERNAL ASSERTION FAILED: AsyncQueue is already failed: The transaction was aborted, so the request cannot be fulfilled.
    at fail (assert.js:33)
    at AsyncQueue.schedule (async_queue.js:50)
    at dispatchIfStillActive (persistent_stream.js:303)
    at StreamBridge.wrappedOnClose (persistent_stream.js:325)
    at StreamBridge.callOnClose (stream_bridge.js:54)
    at webchannel_connection.js:220
    at X.<anonymous> (webchannel_connection.js:195)
    at Bb (index.js:22)
    at X.g.dispatchEvent (index.js:20)
    at Pe.Ca (index.js:94)

Stack 2:

core.js:1350 ERROR Error: Uncaught (in promise): AbortError: The transaction was aborted, so the request cannot be fulfilled.
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4617)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask (polyfills.js:3)
    at i.isUsingGlobalCallback.invoke (polyfills.js:3)