Error with sample firebase code (docRef.get().then(() => {...});

Question

Sample firebase code, not working

Hello, I tried the sample code (from here : https://firebase.google.com/docs/firestore/query-data/get-data)

var docRef = db.collection("cities").doc("SF");

docRef.get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});

Their base code, I get an error.

Here is my adaptation (also has error):

var docRef = this.firestore.collection('Clients').doc(clientId);
docRef.get().then( doc =>
  {
    let test = doc.data() as ClientModel
    clientName = test.ClientName;
    console.log(test);
  });

The 'then following from docRef.get()' produces this error:

Property 'then' does not exist on type 'Observable<DocumentSnapshot>'.ts(2339)

From my research, it appears with angular I am using an observable, however, when I tried to convert to a promise it just froze.

Any ideas what I am doing wrong?

I think my issue was not awaiting it once turned to a promise. — CodeMusic, Nov 17 '20 at 14:25

score 1 · Answer 1 · answered Nov 17 '20 at 21:05

By using await and then you're using an anti pattern, please check this question:

Under the hood, async/await is just promises.

That is, when you have some code that looks like:
const result = await myAsyncFunction();   
console.log(result): 
That's exactly the same as writing:
myAsyncFunction().then(data => {
   const result = data; 
   console.log(result); 
}); 
The reason then - that you shouldn't mix async/await and .then chains

is because it's confusing.

It's better to just pick one style, and stick to it.

And while you're picking one - you might as well pick async/await - it's more understandable.

docRef.get() already returns a promise (that's why in the examples you can see the then/catch), toPromise() converts an observable into a Promise, however as mentioned docRef.get() already returns a promise which means you're making a Promise of another Promise.

If you're already familiar with Angular, I recommend you to use AngularFire which is an implementation of the Firebase SDK and can help you to perform the task with the use of Observables rather than callbacks.

Thank you. But, my issue is that I did not have a then option after get(). I am using angular 10. The only way I got the then to work is by adding to promise. But, I understand what you are saying about await.... it made a promise, I don’t need to wait on it, it promised it would do the rest. — CodeMusic, Nov 18 '20 at 22:58

score 0 · Answer 2 · answered Nov 17 '20 at 14:27

I believe my issue was that I had not awaited the toPromise() results.

I updated my code to the following:

    var clientName = 'Unknown;'
    this.spinnerService.SetSpinner(true);
    var docRef = await this.firestore.collection('Clients').doc(clientId);
    await docRef.get().toPromise()
      .then((doc) => 
      {
          clientName = (doc.data() as ClientModel).ClientName
      })
      .catch((error) => 
        {
          console.log(error);
          alert(error);
        })
      .finally(() =>
        {
            this.spinnerService.SetSpinner(false);
        });

    return clientName;

Error with sample firebase code (docRef.get().then(() => {...});

2 Answers2