javascript - Firestore query with where returning undefined snapshot (Vue.js / Firestore / Vuefire)

Question

I'm currently using Firestore/Vue.js with Vuefire support.

The Firestore DB has just one collection with a couple of users inside:

• Users
  • 001
    • name: Jack
    • uid: {Firebase auth ID}
    • org_id: 123
  • 002
    • name: Frank
    • uid {Firebase auth ID}
    • org_id: 456

in the Vue component, I try to query the DB to get the first user using the auth ID (which is currently stored in a Vuex Store)

<script>
import { db } from "../main.js";    
export default {
  data() {
    return {
      items: [] // to be used later
    };
  },
  created() {
    this.getServices();
  },
  methods: {
    getServices() {
      console.log(this.$store.state.user.uid);
      db.collection("users")
        //.doc("001")
        .where("uid", "==", this.$store.state.user.uid)
        .get()
        .then((snapshot) => {
          console.log(snapshot);
          if (snapshot != null && snapshot.data != null) {
            const user = snapshot.data();
            // do something with document
            let org_id = user["org_id"];
            console.log("org id:" + org_id);
          } else {
            console.log("No data returned!");
          }
        });
    },
  },
};
</script> 

the code always returns an empty snapshot. Checks I have performed:

• accessing the document directly using its doc ID works
• this.$store.state.user.uid is correctly set
• hard-coding the uid in the where clause gives the same error

I'm a total beginner but it looks to me the where clause is not working.

question from:https://stackoverflow.com/questions/65938518/firestore-query-with-where-returning-undefined-snapshot-vue-js-firestore-vu

Answer 1

Since, with db.collection("users").where("uid", "==", this.$store.state.user.uid) you define a Query, the snapshot Object is actually a QuerySnapshot and not a DocumentSnapshot.

So snapshot.data != null is always false because a QuerySnapshot does not have such a property. It is also the case for snapshot.data() != null => it is always false because a QuerySnapshot does not have such a method.

You should either loop over the QuerySnapshot with the forEach() method or use map on the docs property, as shown in the Vuefire example (see "retrieve a collection"):

  db.collection("users")
    .where("uid", "==", this.$store.state.user.uid)
    .get()
    .then((snapshot) => {
      const documents = snapshot.docs.map(doc => doc.data())
      // do something with documents
   })