javascript - Ref.orderBy 不是带有 firebase 和 React.js 的函数

Question

我正在开发聊天消息功能，但我的控制台中的此错误让我感到困惑:messagesRef.orderBy 不是函数

这是我当前的代码:

firebase.js

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import "firebase/compat/storage";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore"

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

export const auth = app.auth()
export const storage = getStorage(app);
export const db = getFirestore(app);
export default app

Messages.jsx

import React, { useState, useEffect } from "react";
import { auth, db } from "../firebase"
import { collection, getDocs } from "firebase/firestore";

const Messaging = () => {
  const [user, setUser] = useState(null);
  const [text, setText] = useState("");
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
    });

    const messagesRef = collection(db, "messages");
    messagesRef.orderBy("createdAt").onSnapshot((snapshot) => {
      const messagesList = snapshot.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id,
      }));
      setMessages(messagesList);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  const handleTextChange = (e) => {
    setText(e.target.value);
  };

  const handleSend = () => {
    const newMessage = {
      text,
      createdAt: new Date(),
      userId: user.uid,
    };
    db.collection("messages").add(newMessage);
    setText("");
  };

  return (
    <>
      <div>
        {user ? (
          <div>
            <div>
              {messages.map((message) => (
                <div key={message.id}>
                  <p>{message.text}</p>
                </div>
              ))}
            </div>
            <div>
              <input value={text} onChange={handleTextChange} />
              <button onClick={handleSend}>Send</button>
            </div>
          </div>
        ) : (
          <button onClick={() => auth.signInAnonymously()}>Sign In</button>
        )}
      </div>
    </>
  );
};

export default Messaging;

我的假设是集合没有正确导入，但我尝试过 collection(db, "messages") 和 db.collection("messages") code> 我不确定从这里去哪里。

感谢您提供的任何意见!

此外，我已经知道我不应该导入/compat 库，但如果没有它，我会收到错误，所以这不会改变。

Answer 1

您将从新的(ish)模块化 SDK 导入 getFirestore，这意味着 orderBy 等功能是顶级函数，而不是引用上的方法。因此，如果我们按照 ordering data 文档中的代码示例进行操作这意味着您的代码应该是:

import { collection, getDocs, onSnapshot, query, orderBy } from "firebase/firestore";

    ...

    const messagesRef = collection(db, "messages");
    onSnapshot(query(messagesRef, orderBy("createdAt")), (snapshot) => {
      ...
    });