How to Fix “FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore”

If you’re working with Firebase Firestore in a JavaScript or TypeScript project, you may encounter the following error:

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

This error occurs when using the collection() function incorrectly in Firebase Firestore. In this article, we’ll explore why this error happens and how to fix it properly.

Understanding the Error

The error message suggests that the first argument passed to collection() is not valid. In Firestore, collection() must be used with:

1. firebase.firestore() instance
2. A DocumentReference
3. A CollectionReference

Common Causes of the Error

1. Incorrect Firestore Initialization
   If Firestore is not properly initialized, the reference to firestore may be undefined, leading to this error.
2. Using collection() Without Firestore Instance
   Calling collection() without explicitly passing the Firestore instance can lead to this issue.
3. Incorrect Import of Firestore Functions
   The Firebase SDK v9 and above use a modular approach. Mixing the older namespaced syntax with the new modular syntax can cause this error.

How to Fix the Error

1. Ensure Firestore is Properly Initialized

In Firebase SDK v9+, Firestore must be initialized correctly using the getFirestore function.

Example of Correct Initialization:

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

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

2. Use collection() with the Firestore Instance

Make sure you’re passing the correct Firestore instance to collection():

const usersCollection = collection(db, "users");

3. Using collection() with a Document Reference

If you’re working with subcollections, you must provide a valid DocumentReference:

import { doc } from "firebase/firestore";

const userDocRef = doc(db, "users", "userId123");
const ordersCollection = collection(userDocRef, "orders");

4. Avoid Mixing v8 and v9 Syntax

In Firebase v8, the syntax was different:

import firebase from "firebase/app";
import "firebase/firestore";

const db = firebase.firestore();
const usersCollection = db.collection("users");

However, this approach does not work in Firebase v9+ unless using the compat library. Always use the modular approach in newer versions.

The FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore error is commonly caused by incorrect Firestore initialization or improper use of the collection() function. To resolve it:

1. Initialize Firestore using getFirestore(app).
2. Ensure you’re passing the Firestore instance (db) to collection().
3. Use proper document references when working with subcollections.
4. Avoid mixing Firebase v8 and v9+ syntax.

Following these best practices will help you use Firestore correctly and avoid this common error in your Firebase projects.