如何从 firestore 检索数据

Question

我正在尝试使用 React vite 和 firebase 创建一个聊天应用程序，我正在使用 firestore 来存储和检索聊天，我从 firebase/firestore 导入 getFirestore ，并将其传递给“db”常量 但应用程序抛出错误，指出 db.collection 不是函数。

import React from "react";
import "./App.css";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from "firebase/auth";

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

const ChatRoom = () => {
  const messagesRef = db.collection('messages'); //this is where the error occurs

  const [user] = useAuthState(auth);
  return (
    <div>
      <h1>Chat Room</h1>
      <p>Welcome {user.displayName}</p>
      <button onClick={LogOut}>Sign Out</button>
    </div>

Answer 1

您必须从

collection

导入

firebase/firestore

并使用

getDocs

我们可以获取集合中的所有文档。

FIRESTORE_DOC

import { collection, getDocs, query, limit } from 'firebase/firestore';
import { useEffect } from 'react';
import { db } from 'your_db_file';

function ChatRoom(){
    useEffect(async ()=>{
        function getMessages(){
            const colRef = collection(db,'messages');
            const qry = query(colRef,limit(25));
            const messages = await getDocs(qry);
        
            console.log(messages.docs);
            return messages.docs
        }
        const messages = await getMessages();
        // do things with message
    })
    ....
}

我使用了

query

和

limit

，因此我们可以限制数据。