时间戳

首页 > 解决方案 > Firebase Reactjs - ae.collection 不是函数

javascript - Firebase Reactjs - ae.collection 不是函数

问题描述

我无法弄清楚这里的错误是什么。我制作了教程 Firebase/website，并在我的项目中做了同样的事情。我试图在我的 React 网站上打印出我在 Firebase 上创建的集合，但在 db.collection 行出现错误：Uncaught (in promise) TypeError: ae.collection is not a function

组件.js：

// React
import { useState, useEffect } from "react";
import { db, collection, getDocs  } from '../../../firebase.js';

const [holder, setHolder] = useState([]); // update
  
  db.collection("holder").onSnapshot((snapshot) => {
    setHolder(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
    );
  });
  console.log({ holder });

更新：firebase.js 下面

    // Import the functions you need from the SDKs you need
    import { initializeApp } from "firebase/app";
    import { getAnalytics } from "firebase/analytics";
    import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
    
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
...
    };
    
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    
    export const db = getFirestore(app);

谢谢 ！

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

您正在使用具有全新语法的 Firebase Modular SDK，您必须在代码中使用相同的语法。尝试将代码重构为：

// React
import { useState, useEffect } from "react";
import { db } from '../../../firebase.js';
import { onSnapshot, collection } from 'firebase/firestore'

const [holder, setHolder] = useState([]); // update
 
onSnapshot(collection(db, 'holder'), (snapshot) => {
  setHolder(
    snapshot.docs.map((doc) => ({
      id: doc.id,
      data: doc.data(),
    }))
  );
})

还要确保您的getFirestore导入来自firebase/firestore而不是来自litein ，firebase.js否则您将遇到此问题：

import { getFirestore } from 'firebase/firestore';

推荐阅读