TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection不是函数

TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function(TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection不是函数)

本文介绍了TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection不是函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我第一次在StackOverflow上提问。我正在做一个学校项目,我是Firebase和JavaScript的初学者。我在试着做一个Tinder的克隆。Reaction告诉我这部分代码有错误。起初我有不同的错误,但它们与Firebase语法相关,我立即修复了它们,但现在我不知道这个错误是什么意思。我的代码在localhost上工作了一瞬间(我看到了我的应用程序),然后出现错误。

import React, { useEffect, useState } from 'react';
import TinderCard from 'react-tinder-card';
import database from './firebase';
import './SwipeCards.css';

...

function SwipeCards() {

...

useEffect(() => {
        database.collection('buddies').onSnapshot((snapshot) => setBuddies(snapshot.docs.map((doc) => doc.data())));
    }, []); 

...

}
对于其他人遇到的类似问题,我尝试了两种解决方案,即: (在我的tinderCards.js中)

database.firestore().collection('buddies')...

和(在我的Firebase.js中)

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

...

const firebaseApp = initializeApp(firebaseConfig);
const database = getFirestore(firebaseApp);
export default database;

但两个都不管用。如果需要,我可以发布更多的代码。如有任何帮助,我们将不胜感激。

sdk

您使用的是新的模块化推荐答案(V9),它不再使用firebase.firestore()命名空间。我建议您按照documentation了解新语法:

import database from './firebase';
import { doc, onSnapshot, collection, query, where, onSnapshot } from "firebase/firestore";

useEffect(() => {
  const q = query(collection(db, "buddies"))
  const unsub = onSnapshot(q, (querySnapshot) => {
    console.log("Data", querySnapshot.docs.map(d => doc.data()));
  });
}, [])

这篇关于TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection不是函数

基础教程推荐