Angular firestore query to firestore document

The error your getting is because you're mixing the firebase native api & angularfire.

selectedUser$: AngularFirestoreDocument<any>;

Calling .ref on your AngularFirestoreCollection converts it to type firebase.firestore.CollectionReference

That being said, there are 2 possibilities to solve your issue:

Using angularfire:

I'm assuming your userCollection looks something like this: this.afs.collection<User>. Since you're querying a collection, there is no way to ensure your query predicate uid == key is unique in firebase. So you query the collection and limit() the result. This will return you an array with one document. flatMap()will return you a single user.

this.afs.collection<User>('users', ref => ref.where('uid', '==', key).limit(1))
   .valueChanges()
   .pipe(
       flatMap(users=> users)
   );

Using the firebase native api:

const query = this.usersCollection.ref.where('uid', '==', key);
query.get().then(querySnapshot => {
    if (querySnapshot.empty) {
        console.log('no data found');
    } else if (querySnapshot.size > 1) {
        console.log('no unique data');
    } else {
        querySnapshot.forEach(documentSnapshot => {
            this.selectedUser$ = this.afs.doc(documentSnapshot.ref);
            // this.afs.doc(documentSnapshot.ref).valueChanges().subscribe(console.log);
            });
        }
    });

This way it's a bit easier to chain multiple .where clauses if it's needed

This worked for me with the latest versions: 2021-July

this.store
    .collection("Products",ref=>ref.where("stock","==",10))
    .get()
    .subscribe(data=>data.forEach(el=>console.log(el.data())));

PS: I'm using get() and no event listener.

this.afs.collection<User>('users', ref => ref.where('uid', '==', key).limit(1))
      );

It will be easier to help you if you add more details about the structure of your Firestore collection and your typescript file.

However, to query the collection I do the following:

1. Define a private AngularFirestore in the constructor.

   constructor(
     private afStore: AngularFirestore,
   ) 
   {
   }
   

2. Define the query and pass the result to the AngularFirestoreDocument.

   this.selectedUser$ = this.afStore
       .collection('TheNameOfYourCollection').doc<any>(key);