Vue2项目使用Firestore 9遇collection()参数错误，如何解决并获取数据？

你遇到的错误核心原因是：Firebase初始化文件导出的是包含Firestore实例的对象，但组件里直接把整个对象传给了collection()方法——而该方法需要的是Firestore实例本身，不是包裹它的对象。

两种快速修复方案 #

方案1：修改Firebase初始化文件的导出方式

直接导出Firestore实例，而非包裹它的对象：

// @/firebase/index.js
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  // 你的Firebase配置信息
};

const app = initializeApp(firebaseConfig);
const dbase = getFirestore(app)
console.log(dbase)
export default dbase // 直接导出实例，而非对象

方案2：在组件中解构导入的对象

如果不想修改初始化文件，就在组件导入时解构出Firestore实例：

<script>
import { collection, getDocs } from 'firebase/firestore';
import { dbase } from '@/firebase/index' // 解构获取实例
// ... 其他组件代码
</script>

完整的Firestore数据获取实现 #

以下是修正后，完整的组件代码（包含数据存储和错误处理）：

<template>
  <div id="app">
    <NavBar></NavBar>
    <router-view></router-view>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import { collection, getDocs } from 'firebase/firestore';
import dbase from '@/firebase/index' // 已修正为直接导出实例
import NavBar from './components/NavBar.vue';
import FooterPage from './components/FooterPage.vue';

export default {
  components: { NavBar, FooterPage },
  data() {
    return {
      menus: [] // 存储从Firestore获取的菜单数据
    }
  },
  methods: {
    async getdata() {
      try {
        // 传入正确的Firestore实例和集合名
        const querySnapshot = await getDocs(collection(dbase, "Menus"));
        // 遍历快照，提取文档ID和数据
        const menuList = querySnapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }))
        this.menus = menuList
        console.log('获取到的菜单数据:', menuList)
      } catch (error) {
        console.error('数据获取失败:', error)
      }
    }
  },
  mounted() {
    this.getdata()
  }
}
</script>

内容的提问来源于stack exchange，提问作者noosheen sh1995