CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestorenext.js
Muhammad Haris Choudhary
Muhammad Haris Choudhary

Reputation: 253

How can I access firebase FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

I am trying to use Firebase in a Next.Js project but I keep getting this error with Firebase 9.8

firebase.js

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

const firebaseConfig = {
  Some config details
};

function createFirebaseApp(config) {
  try {
    return getApp();
  } catch {
    return initializeApp(config);
  }
}

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

export default db;

and the page where I'm trying to load this is the following

import { getSession} from "next-auth/react";
import React from "react";
import db from "../../firebase";
import { collection, doc, getDocs } from "firebase/firestore/lite";

export async function getServerSideProps(context) {
  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

  const session = await getSession(context);

  if (!session) {
    return {
      props: {},
    };
  }

  const docRef = collection(db, `users/${session.user.email}/orders`);

  getDocs(docRef)
    .then((snapshot) => {
      let user = [];
      snapshot.docs.forEach((sdoc) => {
        user.push({ ...sdoc.data(), id: sdoc.id });
      });
      console.log(user);
    })
    .catch((err) => console.log(err));
}

I get this error

[FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore] {
  code: 'invalid-argument',
  customData: undefined,
  toString: [Function (anonymous)]
}

I have also tried simply getting users

collection(db, 'users');

Using the older firebase it should be

  const firebaseOrders = await db
      .collection("users")
      .doc(session.user.email)
      .collection("orders")
      .orderBy("timestamp", "desc");

How can I access this with the orderby and nested collections. The Firebase docs don't seem to cover this.

if I log the db object I get this with the config details

Firestore {
  _authCredentials: LiteAuthCredentialsProvider { auth: null },
  _appCheckCredentials: LiteAppCheckTokenProvider {
    appCheckProvider: Provider {
      name: 'app-check-internal',
      container: [ComponentContainer],
      component: null,
      instances: Map(0) {},
      authDomain: ,
      projectId: ,
      storageBucket: ,
      messagingSenderId: ,
      appId: ,
      measurementId: 
    },
    _config: { name: '[DEFAULT]', automaticDataCollectionEnabled: false },
    _name: '[DEFAULT]',
    _automaticDataCollectionEnabled: false,
    _container: ComponentContainer { name: '[DEFAULT]', providers: [Map] }
  },
  _databaseId: DatabaseId { projectId: '', database: '(default)' }
}

Upvotes: 0

Views: 486

Answers (1)

Navicstein rotciv
Navicstein rotciv

Reputation: 46

Had this problem, in my case i was importing firebase/firestore/lite

Try to remove lite

Upvotes: 1

Related Questions