Vue 2 和 Firebase 9 -“在 'firebase/firestore' 中找不到导出 'getFirestore'

Question

我正在尝试实例化 firebase 并从 firestore 上的集合中获取一些文档。我似乎无法让我的应用程序实例化 firebase/连接到 firestore。我已经阅读了 firebase V9 的文档，这应该是正确的方法吗？任何帮助将不胜感激！我收到错误“export 'getFirestore' was not found in 'firebase/firestore'”以及我尝试导入的所有其他函数的类似错误，例如 getDocs 等
db.js

import {
    initializeApp
} from 'firebase/app';

import {
    getFirestore
} from 'firebase/firestore';

// Your web app's Firebase configuration
const firebaseConfig = {
  etc...
};

// Initialize firebase and then firestore of that instance
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <h1 app color="accent" light>Hans Lite</h1>
    </v-app-bar>
    <v-main>
      <addFormula /> 
    </v-main>
  </v-app>
</template>

<script>
import addFormula from './components/addFormula.vue'
export default {
  name: 'App',

  components: { 
    addFormula
  },

  data: () => ({
    //
  }),
};
</script>

<style scoped>
h1 {
  font-family: 'Roboto Mono', monospace;
  font: bold;
}
</style>

addFormula.vue

<template>
    <v-container fluid>
            <v-col cols="12" md="3">
                <v-card outlined>
                    <v-card-title class="font-weight-bold">Add Formulas</v-card-title>
                    <v-select elevation="2"
                        class="ma-4" 
                        :items="items"
                        label="Select Package"
                        @change="selectPackage"></v-select>
                </v-card>
            </v-col>
    </v-container>
</template>

<script>
import { db } from "../firebase/db"
import { collection, getDocs } from "firebase/firestore"
export default {
    data: () => ({
        items: ['chicken', 'beef'],
        package: null
    }),
    methods: {
        async selectPackage(e) {
            console.log("label: "+e)
            this.package = e
            const querySnapshot = await getDocs(collection(db, this.package))
            var allDocs = [];
            querySnapshot.forEach(doc => {
                allDocs.push(doc.data())
            })
            console.log(allDocs)
        }
    }
}
</script>

<style scoped>
h1 {
    /* border: solid; */
}
</style>

Answer 1

请检查 NPMJS 上可用的 Firebase 版本。

您提到的版本不存在或无效。在 firebase 发行说明和库版本列表中。

Vue 2 和 Firebase 9 -“在 'firebase/firestore' 中找不到导出 'getFirestore'

Vue 2 and Firebase 9 - "export 'getFirestore' was not found in 'firebase/firestore'

javascript

firebase

vue.js

vuejs2

google-cloud-firestore