How can I fix the 'db.collection is not a function' error when using Firebase v9's modular API with Firestore?

The error you're encountering is likely due to mixing the new modular SDK syntax with the older namespaced (compat) syntax. In Firebase v9's modular API, methods such as db.collection no longer exist. Instead, you need to use the modular functions like collection, onSnapshot, addDoc, and serverTimestamp.

Below is how you can update your code to work with the modular SDK:

---

Updated Feed.js Example

JAVASCRIPTCopied
import React, { useEffect, useState } from 'react';
import "./Feed.css";
import CreateIcon from '@mui/icons-material/Create';
import InputOption from './InputOption';
import ImageIcon from '@mui/icons-material/Image';
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import EventNoteIcon from '@mui/icons-material/EventNote';
import CalendarViewDayIcon from '@mui/icons-material/CalendarViewDay';
import Post from './Post';

// Import modular Firestore functions
import { collection, onSnapshot, addDoc, serverTimestamp } from 'firebase/firestore';
import { db } from './firebase';

function Feed() {
  const [input, setInput] = useState("");
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const postsCollection = collection(db, "posts");
    const unsubscribe = onSnapshot(postsCollection, (snapshot) => {
      setPosts(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data()
        }))
      );
    });
    return () => unsubscribe();
  }, []);

  const sendPost = async (e) => {
    e.preventDefault();
    try {
      await addDoc(collection(db, "posts"), {
        name: "Luke Knight",
        description: "this is a test",
        message: input,
        photoUrl: "",
        timestamp: serverTimestamp(),
      });
      setInput(""); // Optional: reset input after sending
    } catch (err) {
      console.error("Error adding document: ", err);
    }
  };

  return (
    <div className='feed'>
      <div className='feed__inputContainer'>
        <div className='feed__input'>
          <CreateIcon />
          <form>
            <input
              value={input}
              onChange={e => setInput(e.target.value)}
              type="text"
            />
            <button onClick={sendPost} type="submit">Send</button>
          </form>
        </div>
        <div className='feed__inputOptions'>
          <InputOption Icon={ImageIcon} title="Photo" color="#70B5F9" />
          <InputOption Icon={SubscriptionsIcon} title="Video" color="#E7A33E" />
          <InputOption Icon={EventNoteIcon} title="Event" color="#C0CBCD" />
          <InputOption Icon={CalendarViewDayIcon} title="Write article" color="#7FC15E" />
        </div>
      </div>
      {posts.map(({ id, data: { name, description, message, photoUrl } }) => (
        <Post
          key={id}
          name={name}
          description={description}
          message={message}
          photoUrl={photoUrl}
        />
      ))}
      <Post name="Luke Knight" description="This is a test" message="This worked" />
    </div>
  );
}

export default Feed;

---

Key Changes and Considerations

• Remove compat Imports:
  Remove the following lines, as they are not needed with the modular SDK:

  JAVASCRIPTCopied
  import firebase from 'firebase/compat/app';
  import 'firebase/compat/auth';
  import 'firebase/compat/firestore';

• Firestore Methods:
  Replace:

  • db.collection("posts") with collection(db, "posts")
  • db.collection("posts").onSnapshot(...) with onSnapshot(collection(db, "posts"), ...)
  • db.collection("posts").add({...}) with addDoc(collection(db, "posts"), {...})
  • firebase.firestore.FieldValue.serverTimestamp() with serverTimestamp()

• Async/Await for addDoc:
  It's a good practice to use async/await (or .then/.catch) when adding documents so you can handle any errors properly.

By making these changes, your code will use the latest Firebase modular SDK properly and resolve the error caused by mixing SDKs.

Let me know if you need further assistance!