• First things first, let's get Firebase into our app.
• Make sure you've got the right project settings configured.

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT_ID.appspot.com',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}
const db = firebase.firestore();

• Now, let's define the Firestore collection and set up a query to fetch the documents we need.

const query = db.collection('yourCollectionName').where('field', '==', 'value');

• Time to attach a real-time listener to handle those query snapshots.

const unsubscribe = query.onSnapshot((querySnapshot) => {
  const data = [];
  querySnapshot.forEach((doc) => {
    data.push({ id: doc.id, ...doc.data() });
  });

  // Handle data in real-time
  updateUIWithRealtimeData(data);
});

• Let's define a function to update the UI with the real-time data.

function updateUIWithRealtimeData(data) {
  const dataListElement = document.getElementById('dataList');
  dataListElement.innerHTML = '';  // Clear existing data

  data.forEach((item) => {
    const listItem = document.createElement('li');
    listItem.textContent = JSON.stringify(item);
    dataListElement.appendChild(listItem);
  });
}

• If you ever need to stop listening to the real-time updates, you can unsubscribe from the listener.

unsubscribe();  // Call this function to detach the listener

• Don't forget to add some error handling logic to manage any issues that might pop up during real-time listening.

const unsubscribe = query.onSnapshot(
  (querySnapshot) => {
    const data = [];
    querySnapshot.forEach((doc) => {
      data.push({ id: doc.id, ...doc.data() });
    });

    updateUIWithRealtimeData(data);
  },
  (error) => {
    console.error('Error fetching real-time data: ', error);
  }
);

• Let's optimize the query to listen for specific changes and cut down on the amount of data being transferred.

const optimizedQuery = db.collection('yourCollectionName')
  .where('field', '==', 'value')
  .orderBy('timestamp', 'desc')
  .limit(10);

const unsubscribe = optimizedQuery.onSnapshot((querySnapshot) => {
  const data = [];
  querySnapshot.docChanges().forEach((change) => {
    if (change.type === 'added') {
      data.push({ id: change.doc.id, ...change.doc.data() });
    }
    if (change.type === 'modified') {
      // Handle modified documents
    }
    if (change.type === 'removed') {
      // Handle removed documents
    }
  });

  updateUIWithRealtimeData(data);
});