Hey there! Migrating from Firebase 8 to 9's modular SDK is all about switching from the old namespace-based syntax to tree-shakable function calls. Let's convert your real-time Firestore listener code step by step.

Step 1: Import the necessary Firestore functions #

First, you'll need to import specific functions from Firebase Firestore instead of relying on the db namespace:

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

(Note: Make sure you've already initialized your Firebase app elsewhere in your code—getFirestore() will use that initialized app by default.)

Step 2: Build the query and set up the real-time listener #

In Firebase 9, chained methods like collection().doc().collection().orderBy() are replaced with explicit function composition using query(). Here's the equivalent code to your Firebase 8 snippet:

// Initialize Firestore instance (if not already done)
const db = getFirestore();

// Create a reference to the messages subcollection under the specified room
const messagesCollection = collection(doc(db, 'rooms', id), 'messages');

// Build the query to order messages by timestamp ascending
const messagesQuery = query(messagesCollection, orderBy('timestamp', 'asc'));

// Set up the real-time snapshot listener
const unsubscribe = onSnapshot(messagesQuery, (snapshot) => {
  // Map snapshot docs to your message data (add doc.id if you need it!)
  const updatedMessages = snapshot.docs.map(doc => ({
    ...doc.data(),
    id: doc.id // Optional but often useful to track individual messages
  }));
  // Update your state with the new messages
  setState(updatedMessages);
});

Bonus: Don't forget to clean up the listener #

It's crucial to stop the listener when it's no longer needed (like when your component unmounts) to prevent memory leaks. If you're using React, you can handle this in a useEffect cleanup function:

import { useEffect, useState } from 'react';

function RoomMessages({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const db = getFirestore();
    const messagesCollection = collection(doc(db, 'rooms', roomId), 'messages');
    const messagesQuery = query(messagesCollection, orderBy('timestamp', 'asc'));

    const unsubscribe = onSnapshot(messagesQuery, (snapshot) => {
      const updatedMessages = snapshot.docs.map(doc => ({
        ...doc.data(),
        id: doc.id
      }));
      setMessages(updatedMessages);
    });

    // Return cleanup function to stop listening when component unmounts
    return () => unsubscribe();
  }, [roomId]);

  // Render your messages here...
}

The core logic matches your original Firebase 8 code—we're still listening for real-time snapshot updates on the ordered messages collection—but the modular syntax is more explicit and tree-shakable, which helps reduce your app's bundle size.

内容的提问来源于stack exchange，提问作者Tammibriggs