从 vue js 读取 firebase 中的集合

Question

我正在尝试从 firebase firestore 中读取具有特定名称的集合，但我收到一个错误，我无法找到它的答案。在这里你可以看到我的引导文件：

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};

这是我在 .vue 文件中的脚本标签：

<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>

在这里你可以看到我得到的错误列表：

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

Answer 1

导入的 db 将是一个包含 Firestore 和 Auth 实例的对象。尝试更改您的导入，如下所示：

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());
    });
  },
};

同时将引导文件中的export default { db }更改为export { db }。

从 vue js 读取 firebase 中的集合

Read Collection in firebase from vue js

javascript

firebase

vue.js

google-cloud-firestore

quasar-framework