VueJS - Vuefire - TypeError: document.onSnapshot不是函数

Question

我正在尝试在我的项目中实现Vuefire。我正在遵循Vuefire网站上的指南，但仍然收到这个错误。

db.js：

import firebase from 'firebase/app'
import 'firebase/firestore';
const firebaseConfig = {
apiKey: ....,
authDomain: ....,
projectId: ....,
storageBucket: ...,
messagingSenderId:....,
appId: ..."
};
const app = firebase.initializeApp(firebaseConfig)
export const db = app.firestore()

main.js

    import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import { firestorePlugin } from 'vuefire'
import DatetimePicker from 'vuetify-datetime-picker';
Vue.use(firestorePlugin)
Vue.config.productionTip = false;
Vue.use(DatetimePicker)
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');

App.vue

import { db } from "../db";
export default {
name: "App",
data() {
return {
fireDB: [],
  },
mounted() {

console.log(this.fireDB);
  },
firestore: {
// fireDB: db.collection("something").doc('else').get().then((res) => {
//   console.log(res);
// }) - like this it gives me the error.

//fireDB: db.collection("something") - like this it returns an array with an object that is my database.
  },

};

在控制台中，我看到调用onSnapshot的‘文档’是一个promise

Answer 1

我不确定这是否是你的问题的原因，但我在使用VuexFire时遇到了同样的错误，这是因为我安装了Firebase v9，它有一个新的API，并且还不能与Vuefire兼容。

你可以尝试使用新的Firebase Viewfire API或者降级到v8 -这是当前v9站点中的示例代码所使用的(实际上我认为它是v7，但它可以与v8一起工作)。

要降级，请检查package.json的Firebase版本，并确保它是v8，例如"firebase": "^8.10", (并运行npm i)

这是v8查询语法https://firebase.google.com/docs/firestore/quickstart#web-version-8_4

db.collection("users").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

这是v9语法https://firebase.google.com/docs/firestore/quickstart#web-version-9_4

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

我发现在POSTing新文档到Firebase v9时，VuexFire v3.2.5可以工作，但在绑定集合时，我得到了onSnapshot错误。因此，我降级到Firebase v8，并将我的绑定切换到旧语法(根据Viewfire文档)。

有一个关于升级的Viewfire问题，它是活动的(截至2021年10月)，但尚未完成。https://github.com/vuejs/vuefire/issues/1128