如何使用 React 从 firestore 获取数据答案

【问题标题】：How to get data from firestore with react如何使用 React 从 firestore 获取数据
【发布时间】：2022-11-24 11:54:40
【问题描述】：

我已经这样做了很长时间，（可能是因为我是新手）。我觉得它更容易，但由于某种原因我无法做到。

我的意图是从 Firestore 获取数据并在反应中用它制作一个表。

我什至都在努力让它呈现到页面上，我尝试了很多不同的方法，跟随大量的 youtube vids，并且阅读并且似乎无法让它工作，我哪里出错了。有人可以帮忙吗？

import React, { useContext, useEffect, useState } from "react";
import MealPlanComponent from "../component/mealPlanComponent";
import { auth, db } from "../firebase";
import { collection, onSnapshot } from "firebase/firestore";
import { Homepage } from "../pages/homepage";
import { AuthProvider } from "./authContext";
import { Form } from "react-router-dom";

export function CreateUserDatabase() {
  const [mealData, setMealData] = useState([]);

  const mealCollectionRef = collection(db, "users");

  useEffect(() => {
    onSnapshot(mealCollectionRef, (snapshot) => {
      setMealData(
        snapshot.docs.map((doc) => {
          return {
            id: doc.id,
            viewing: false,
            ...doc.data(),
          };
        })
      );
    });
  }, []);

  return (
    <div>
      {mealData.map((meal, i) => (
        <div key={meal.id}>
          <h3>{meal.meals}</h3>
        </div>
      ))}
    </div>
  );
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您还没有使用 getDoc 方法。您可以参考从docs 中获取的以下代码

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

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // doc.data() will be undefined in this case
  console.log("No such document!");
}

【讨论】：