如何解决 Angular / Typescript 应用程序中的 Promise 不匹配？

Question

I am trying to retrieve a User object from Firestore in my Angular app.

User model:

import { PlaceLocation } from './location.model';

    export class User {
        constructor(
            public userId: string,
            public userName: string,
            public isMechanic: boolean,
            public location: PlaceLocation
        ) { }
    }

Component:

user: User;

this.usersService
    .getUserByUserId(paramMap.get('id'))
    .subscribe(user => {
        this.user = user;
});

Users Service:

getUserByUserId(userId: string) {
    return of(
      firebase.firestore().collection("users").where("userId", "==", userId)
        .get()
        .then((querySnapshot) => {
          console.log("Query Snapshot:", querySnapshot);
        }).catch((err) => {
          console.log("Query Error:", err);
        })
    );
  }

But I'm getting this compilation error when I try to assign this.user = user :

Type 'Promise' is missing the following properties from type 'User': userId, userName, isMechanic, location

Can someone please tell me what changes are required to resolve this issue?

Answer 1

you're returning an observable of a promise... think you want from , which converts a promise into an observable.

  getUserByUserId(userId: string) {
    return from(
      firebase.firestore().collection("users").where("userId", "==", userId)
        .get()
    ).pipe(
      map(querySnapshot => { ... do transform ... }),
      tap( // handle errors / logging in observable fashion
        query => console.log(query, 'success),
        error => console.log(error, 'error')
      ),
      // catchError(error => { ... do something with error ... })
    );
  }

Answer 2

"from(...promise...)" solution will not always work. Promise could resolve before you soubscribe on.

True way is make observable at first:

getUserByUserId(userId: string) {
  return new Observable<any>((observer: Observer<any>) => {
    firebase.firestore().collection("users").where("userId", "==", userId)
        .get()
        .then((querySnapshot) => {
          observer.next(querySnapshot);
          observer.complete();
        }).catch((err) => {
          observer.error(err);
        })

  });
}