Question

迭代 Firebase 数据库

2022-01-27

331

reactjs database firebase google-cloud-firestore

我尝试在 App.js 中迭代我的 React 应用的 firebase db 变量，但遇到了一些问题。这是我一直在观看的视频 - 大约 1 小时 9 分钟 https://www.youtube.com/watch?v=f7T48W0cwXM&t=44s

所以基本上他们导入并设置了他们的 firebase.js。我的看起来有点不同，因为自视频发布以来语法已经发生了变化。我的 firebase.js 如下所示：

import { initializeApp } from "firebase/app";

import { getAuth, signInWithPopup, GoogleAuthProvider } from 

'firebase/auth'; 
     import {getFirestore} from "firebase/firestore" 
     const firebaseConfig = {   
     apiKey: "AIzaSyAomHkUyY4I8XD3rYq-LD2SbftJXj-L8Ug",   
     authDomain: "travelgram-39eba.firebaseapp.com",   
     projectId: "travelgram-39eba",   
     storageBucket: "travelgram-39eba.appspot.com",   
     messagingSenderId: "211989329504",   
     appId: "1:211989329504:web:b56e0357be92215bac7505",  
     measurementId: "G-Y90M6SQKYC" }; 

const app = initializeApp(firebaseConfig); 
export const auth = getAuth(); 
export const db = getFirestore(app);

现在，当我从“。/firebase”导入 {db} 时 - 我想在 useEffect 钩子中对其进行迭代（就像在视频中一样），但似乎无法弄清楚如何从 firebase db 中获取内容。

这是我按照视频操作后输入的内容：

useEffect(() => {
       db.collection('posts').onSnapshot(snapshot => {
         setPosts(snapshot.docs.map(doc => doc.data()))
  })
 }, [posts] )

但是这显示了一个错误：

App.js:27 Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_3 _.db.collection 不是函数

如果我 console.log(db) 我会得到一个如下所示的长对象：

FirebaseAppImpl {_isDeleted: false, _options: {…}, _config: {…}, _name: '[DEFAULT]', _automaticDataCollectionEnabled: false, …}
_automaticDataCollectionEnabled: false
_config: {name: '[DEFAULT]', automaticDataCollectionEnabled: false}
_container: ComponentContainer {name: '[DEFAULT]', providers: Map(17)}
_isDeleted: false
_name: "[DEFAULT]"
_options: {apiKey: 'AIzaSyAomHkUyY4I8XD3rYq-LD2SbftJXj-L8Ug', authDomain: 'travelgram-39eba.firebaseapp.com', projectId: 'travelgram-39eba', storageBucket: 'travelgram-39eba.appspot.com', messagingSenderId: '211989329504', …}
automaticDataCollectionEnabled: (...)
config: (...)
container: (...)
isDeleted: (...)
name: (...)
options: (...)
[[Prototype]]: Object

我似乎无法弄清楚如何从那里获取实际信息。 db.collections 也未定义，我甚至尝试使用 const db = getFirestore(app); 而不是 getDatabase，但没有任何变化。

任何帮助都非常感谢！！也可以通过电子邮件联系我 [email protected]

Answer 1

从导入语句来看，您似乎使用的是“Web 版本 9”（模块化）版本，但您用于查询的语法实际上是“版本 8”（命名空间）语法。

模块化版本的语法如下所示：

import { collection, doc, setDoc } from "firebase/firestore"; 

const citiesRef = collection(db, "cities");

就您而言，似乎您需要实时更新，因此您需要执行以下操作：

import { doc, onSnapshot } from "firebase/firestore";

const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => {
    console.log("Current data: ", doc.data());
});

请参阅设置您的环境、读取数据一次和监听实时更新。

TLDR： 确保查询语法与您设置项目时使用的语法相匹配。

Answer 2

下面是我让它工作的方法:(对于那些好奇的人)

import React, {useState, useEffect} from "react"
import './App.css';
import Post from './components/Post/Post';
import { db } from './firebase';
import {collection, onSnapshot } from "firebase/firestore";


function App() {
  const [posts, setPosts] = useState([]);
  const [user, setUser] = useState(null);

  useEffect(() => {
    onSnapshot(collection(db, "posts"), (snapshot) => {
      setPosts(snapshot.docs.map(doc => ({
       id: doc.id,
       post: doc.data()
      })))
    })
  }, [posts]);