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

Posted 2023-02-22

【中文标题】VueJS - Vuefire - TypeError：document.onSnapshot 不是函数

【英文标题】：VueJS - Vuefire - TypeError: document.onSnapshot is not a function

【发布时间】：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 的“文档”是一个承诺

【参考方案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