无法使用React获取Firebase集合

Question

我正在使用React hooks + firebase。

在firebase中，我创建了一个名为“项目”的集合

当我尝试使用以下命令控制台记录数据时：

const Dashboard = () => {
  const { firebase } = useContext(GlobalContext);

  return (
    <div className="container">
      {console.log(firebase.db.collection("projects"))}
    </div>
  );
};

我得到以下对象：

应该看不到我的数据吗？

下面是我的firebase和上下文设置

firebase.js

import app from "firebase/app";
import "firebase/auth";
import "firebase/firebase-firestore";

const config = {//mydata}

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.auth = app.auth();
    this.db = app.firestore();
  }
}

export default new Firebase();

context.js

import React, { useReducer } from "react";
import { projectReducer } from "./reducers";
import firebase from "../components/firebase/firebase";

export const GlobalState = props => {
  const [projects, setProjects] = useReducer(projectReducer, []);

  return (
    <GlobalContext.Provider
      value={{
        projects,
        firebase
      }}
    >
      {props.children}
    </GlobalContext.Provider>
  );
};

Answer 1

如何在代码中与Firestore交互的关键似乎是：

firebase.db.collection("projects")

此代码在Firestore中创建对projects集合的引用。它不会不从数据库中检索任何数据。

要获取数据，您需要将一个侦听器附加到该集合。来自Firestore documentation on getting documents from a collection：

db.collection("cities").where("capital", "==", true)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

您需要在代码中执行类似的操作。

通常在React项目中，您将通过在setState(...)回调中调用then()将数据存储在组件的状态中，然后从JSX中的状态呈现内容。