升级Firebase Web v9 SDK导致react-firebase-hooks的useCollectionData()钩子失效

Let's work through resolving this TypeError: v1.isEqual is not a function issue you're hitting when migrating to Firebase's modular v9 SDK with react-firebase-hooks.

Root Causes #

This error usually stems from two common pitfalls during the SDK transition:

• Missing imports for critical Firestore modular functions
• Compatibility bugs between early Firebase v9 releases and react-firebase-hooks v3.x

Step-by-Step Solutions #

1. Add Missing Firestore Modular Function Imports #

Your current v9 code is missing imports for collection, query, orderBy, and limit—these are required for the modular SDK to function correctly. Omitting them creates invalid query objects that trigger the isEqual error.

2. Upgrade Firebase to a Newer Version #

Firebase v9.0.2 is an early release of the modular SDK with known compatibility issues. React-firebase-hooks v3.x works far better with newer patch versions of Firebase v9.

3. Corrected Code Example #

Here's your component updated with all necessary imports and best practices:

import { initializeApp } from "firebase/app";
// Add missing Firestore modular imports
import { getFirestore, collection, query, orderBy, limit } from "firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";

const app = initializeApp({ /* Your Firebase config here */ });
const db = getFirestore(app);

function Foo() {
  const messagesRef = collection(db, "messages");
  const q = query(messagesRef, orderBy("createdAt"), limit(25));
  const [messages] = useCollectionData(q, { idField: "id" });

  // Add loading state for better UX
  return <>{messages ? messages.map(msg => <div key={msg.id}>{msg.text}</div>) : "Loading messages..."}</>;
}

4. Updated Dependencies #

Modify your package.json to use a more recent, stable Firebase version (v9.6.0 or later is recommended):

"dependencies": {
  "firebase": "^9.23.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-firebase-hooks": "^3.0.4"
}

5. Fallback: Use Firebase v9 Compat Mode (If Needed) #

If you still run into issues after the above steps, use the compat layer to bridge the old and new SDK syntax. This is helpful for gradual migrations:

// Import compat versions of Firebase
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";

firebase.initializeApp({ /* Your Firebase config here */ });
const firestore = firebase.firestore();

function Foo() {
  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(25);
  const [messages] = useCollectionData(query, { idField: 'id' });
  
  return <>{messages ? messages.map(msg => <div key={msg.id}>{msg.text}</div>) : "Loading messages..."}</>;
}

Why This Works #

• Adding missing imports ensures you're using valid, official modular SDK functions instead of implicit globals that cause broken query objects.
• Upgrading Firebase fixes early v9 bugs that disrupted react-firebase-hooks' internal logic (like the isEqual check failure).
• The compat layer acts as a temporary bridge, letting you use familiar v8-style syntax while running on the v9 SDK to isolate migration issues.

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