CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-firestorequasar-framework
Pooya Panahandeh
Pooya Panahandeh

Reputation: 638

Read Collection in firebase from vue js

I am trying to read a collection with specific name from firebase firestore, but I get an error which I couldn't find answer for it. Here you can see my boot file:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { collection, query, where, doc, getDoc } from "firebase/firestore";



const firebaseApp = initializeApp({
    apiKey: "####",
    authDomain: "####",
    projectId: "####",
});


const db = getFirestore();
const auth = getAuth();
const createUser = createUserWithEmailAndPassword();

export default {db, auth, createUser};

Here is my script tag in .vue file:

<script>
import { collection, getDocs } from "firebase/firestore";
import db from "src/boot/firebase"

export default {
  setup() {
    return {
      waitingList: {},
    };
  },
  created() {
    const querySnapshot = await getDocs(collection(db, "waitingList"));
    querySnapshot.forEach((doc) => {
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.name, " => ", doc.data());
    });
  },
};
</script>

and here you can see the list of errors I got:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'tenantId')

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

Upvotes: 1

Views: 1346

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50830

The imported db would be an object containing instances of Firestore and Auth. Try changing your import as shown below:

import { db } from "src/boot/firebase"
// instead of import db from "..." 

export default {
  setup() {
    return {
      waitingList: {},
    };
  },
  async created() {
    const querySnapshot = await getDocs(collection(db, "waitingList"));
    querySnapshot.forEach((doc) => {
      console.log(doc.name, " => ", doc.data());
    });
  },
};

Also change export default { db } to export { db } in the boot file.

Upvotes: 1

Related Questions