I think I know why this isn't working (the way Firebase had its syntax changed in v9 or something?), but I'm not sure what changes. I've checked the documentation, but I'm still confused.

import { db } from './firebase.js';  

function App() {
  const [posts, setPosts] = useState([

  ]);

  useEffect(() => {
    db.collection('posts').onSnapshot(snapshot => {
      setPosts(snapshot.docs.map(doc => doc.data()));
    });
  }, []);

The error I get is this: Uncaught TypeError: firebase_js__WEBPACK_IMPORTED_MODULE_3_.db.collection is not a function or something similar to this except for my .map().

This is my guess of what I should write:

useEffect(() => {
    const q = query(collection(db, "posts"))
    setPosts(onSnapshot(q, (querySnapshot) => {
      console.log("Data", querySnapshot.docs.map(d => doc.data()))
    }))
  }, []);

But I can't seem to get this to work either.

firebase.js in case its needed:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

export { db };

(edit) Solution:

useEffect(() => {
    const q = query(collection(db, "posts"))
    onSnapshot(q, (querySnapshot) => {
      console.log("Data", querySnapshot.docs.map(d => d.data()))
    })
  }, []);