Javascript Ref.orderBy 不是带有 firebase 和 react.js 的函数

我正在开发一个聊天消息功能，但我被控制台中的这个错误难住了:messagesRef.orderBy is not a function

以下是我当前的代码:

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 没有正确导入，但我已经try 了collection(db, "messages")和db.collection("messages")，我不确定从哪里开始.

感谢您提供的任何意见！

此外，我已经知道我不应该导入/Compat库，但是我在没有它的情况下得到了一个错误，所以这一点没有改变.