Javascript import firebase.firestore（）返回未定义的

我有一个安装了vuefire的vue应用程序。下面是这里的文档：，我有main.js文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { firestorePlugin } from 'vuefire'

Vue.config.productionTip = false;

Vue.use(firestorePlugin);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

firebase.js文件如下所示：

import firebase from "firebase";

const config = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXXX",
    appId: "XXXXX"
};

firebase.initializeApp(config);

export const db = firebase.firestore();

这是主组件

<template>
  <div>
    <button @click="signIn">Log in with google</button>
  </div>
</template>

<script>
import firebase from "firebase";
import db from "@/firebase"
export default {
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
          const malakas = {
            userId: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL
          };

          db.collection("malakes")
            .doc(result.user.uid)
            .set(spreadOparatorTest, { merge: true });

        })
        .catch(err => console.log(err));
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

登录谷歌
从“firebase”导入firebase；
从“@/firebase”导入数据库
导出默认值{
方法：{
签名（）{
const provider=new firebase.auth.GoogleAuthProvider（）；
火基
.auth（）
.signInWithPopup（提供程序）
。然后（结果=>{
常量马拉卡斯={
userId:result.user.uid，
电子邮件：result.user.email，
displayName:result.user.displayName，
photoURL:result.user.photoURL
};
db.收集（“弊病”）
.doc（result.user.uid）
.set（spreadparatortest，{merge:true}）；
})
.catch（err=>console.log（err））；
}
}
};

奇怪的是，在

db.collection（…）

中，我得到：

TypeError:无法读取未定义的属性“collection”

---

因为我要导入的数据库被导入为未定义。但是，如果我将

db.collection（…）

更改为

firebase.firestore（）.collection（…）

，它可以正常工作，但我不理解为什么。

问题是您需要单独导入几个依赖项。。。这是一种很好的安全方式：

import firebase from "firebase/app";
require('firebase/firestore')
require('firebase/auth')

const config = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXXX",
    appId: "XXXXX"
};

firebase.initializeApp(config);

export const db = firebase.firestore();

export const auth = firebase.auth();

然后您的组件可以像这样导入em：

import firebase from 'firebase/app'
import { db, auth } from "./firebase" // <--- or wherever the config file is
export default {
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
       auth
        .signInWithPopup(provider)
        .then(result => {
          const malakas = {
            userId: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL
          };

          db.collection("malakes")
            .doc(result.user.uid)
            .set(spreadOparatorTest, { merge: true });

        })
        .catch(err => console.log(err));
    }
  }
};

从“firebase/app”导入firebase
从“/firebase”/”导入{db，auth}{
常量马拉卡斯={
userId:result.user.uid，
电子邮件：result.user.email，
displayName:result.user.displayName，
photoURL:result.user.photoURL
};
db.收集（“弊病”）
.doc（result.user.uid）
.set（spreadparatortest，{merge:true}）；
})
.catch（err=>console.log（err））；
}
}
};

---

希望这有帮助

问题是您需要分别导入几个依赖项。。。这是一种很好的安全方式：

import firebase from "firebase/app";
require('firebase/firestore')
require('firebase/auth')

const config = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXXX",
    appId: "XXXXX"
};

firebase.initializeApp(config);

export const db = firebase.firestore();

export const auth = firebase.auth();

然后您的组件可以像这样导入em：

import firebase from 'firebase/app'
import { db, auth } from "./firebase" // <--- or wherever the config file is
export default {
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
       auth
        .signInWithPopup(provider)
        .then(result => {
          const malakas = {
            userId: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL
          };

          db.collection("malakes")
            .doc(result.user.uid)
            .set(spreadOparatorTest, { merge: true });

        })
        .catch(err => console.log(err));
    }
  }
};

从“firebase/app”导入firebase
从“/firebase”/”导入{db，auth}{
常量马拉卡斯={
userId:result.user.uid，
电子邮件：result.user.email，
displayName:result.user.displayName，
photoURL:result.user.photoURL
};
db.收集（“弊病”）
.doc（result.user.uid）
.set（spreadparatortest，{merge:true}）；
})
.catch（err=>console.log（err））；
}
}
};

希望这有帮助