VueJS - Vuefire - TypeError：document.onSnapshot 不是函数答案

【问题标题】：VueJS - Vuefire - TypeError: document.onSnapshot is not a functionVueJS - Vuefire - TypeError：document.onSnapshot 不是函数
【发布时间】：2021-06-26 04:48:15
【问题描述】：

我正在尝试在我的项目中实现 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 的“文档”是一个承诺

【问题讨论】：

标签： javascript firebase vue.js vuefire

【解决方案1】：

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

您可以尝试使用新的 Firebase v9 API 或降级到 v8 - 这是当前 Viewfire 站点中的示例代码使用的（实际上我认为它说它是 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()}`);
});

我发现 VuexFire v3.2.5 在将新文档发布到 Firebase v9 时可以正常工作，但在绑定集合时出现 onSnapshot 错误。所以我降级到 Firebase v8 并将我的绑定切换到旧语法（根据 Viewfire 文档）。

存在一个关于升级的 Viewfire 问题，该问题处于活动状态（截至 2021 年 10 月）但尚未完成。 https://github.com/vuejs/vuefire/issues/1128

【讨论】：