Question

无法使用 firestore 在 vue 中将未定义或 null 转换为对象

2021-01-02

1015

firebase vue.js google-cloud-firestore vuejs3

我想从云 firestore 获取产品，我以这种方式存储

HelloWorld.vue 组件：

import db from "./firebaseInit";
export default {
name: "HelloWorld",
data() {
return {
products: [],
imageURL: "",
};
},

created () {
db.collection("product").doc('t9tWJq7BTvqmPvxPjcxy').get();
},
}

firebaseInit.js 文件：

从 'firebase' 导入 fireabse

导入 "firebase/firestore";

从 "./firebaseConfig" 导入 { firebaseConfig };

const firebaseApp = fireabse.initializeApp(firebaseConfig)

导出默认 firebaseApp.firestore();

我得到的错误是：

index.esm.js?ffa6:130 Uncaught TypeError: Cannot convert undefined or null to object at hasOwnProperty () at eval (prebuilt-89214b55-2a7b2673.js?c244:14410) at e.t (prebuilt-89214b55-2a7b2673.js?c244:14412) at new e (prebuilt-89214b55-2a7b2673.js?c244:16077) at eval (index.js?c68e:69) at Component.eval [as instanceFactory] (index.js?c68e:66) at Provider.getOrInitializeService (index.esm.js?ffa6:218) at Provider.getImmediate (index.esm.js?ffa6:116) at FirebaseAppImpl._getService (index.esm.js?cc84:220) at FirebaseAppImpl.firebaseAppImpl. [as firestore] (index.esm.js?cc84:432)

Answer 1

下面应该可以解决问题：

firebaseConfig.js

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';   // Just as an example of how to add another Firebase service. 


const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    //...
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
const storage = firebase.storage();

export { db, storage };

HelloWorld.vue（在 views 文件夹中）

<script>
 const fb = require("../firebaseConfig.js");
 export default {
   name: "HelloWorld",
   data() {
     return {
       productData: null
     };
   },

   created () {
     fb.db.collection("product").doc('t9tWJq7BTvqmPvxPjcxy').get()
      .then(doc => {
        if (doc.exists) {
            this.productData = doc.data();
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
   },
 }
</script>

请注意，使用此代码您仅获取一个文档。

如果要填充产品数组，您应该查询整个集合，如下所示：

created () {
    fb.db.collection("product").get()
      .then((querySnapshot) => {
        let productsArray = [];
        querySnapshot.forEach((doc) => {
           let p = doc.data();
           p.id = doc.id;
           productsArray.push(p);
          }
        });
        this.products = productsArray;
      })
      .catch((error) => {
        console.log(error);
      });
   },

Answer 2

我的建议是改变 firebase 的启动方式。

在 main.js 中初始化 firebase，而不是在组件中初始化

// 建议将此逻辑放在 main.js 中

从 'firebase' 导入 fireabse

导入 "firebase/firestore";

从 "./firebaseConfig" 导入 { firebaseConfig };

fireabse.initializeApp(firebaseConfig) // 此行中 firebase 拼写错误

调用 firestore 方法时，可以直接使用 import firebase from 'firebase/app';

firebase

import firebase from 'firebase/app';

export default {
   name: "HelloWorld",
   data() {
     return {
       products: [],
       imageURL: "",
     };
   },

   async created () {
     const ref = firebase.firestore().collection("product").doc('t9tWJq7BTvqmPvxPjcxy')
     const snapshot = await ref.get(); // note the `await` keyword here
     console.log(snapshot);
     // ...using the fetched data
   },
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

请注意 async/await 关键字，因为 firestore get() 是一个异步函数调用。

关键点是，每当某些变量可能在某一时刻为空或未定义时，您可以使用 console.log 将其打印出来并检查。