React Native: firestore/firebase Expected first argument to collection() to be a CollectionReference... how?

Question

So I have a simple React Native app that I created using Expo and debug on my personal Android device.

I've included firebase/firestore into my app and am now trying to add an object to firestore on button click.

Here's my code:

firebaseConfig.js :

import { initializeApp } from '@firebase/app';

var config = {
    ...
}
  
const app = initializeApp(config);

export default app;

Component:

import { app } from '../firebaseConfig'; import { getFirestore } from 'firebase/firestore/lite'; import { doc, setDoc, collection, query, where, getDocs, initializeFirestore } from "firebase/firestore"; ...

export default function Component() { const firestoreDb = getFirestore(app);

// this function is called when clicking a button
const onAddListPress = () => {
    setDoc(doc(firestoreDb, "cities", "LA"), {
        name: "Los Angeles",
        state: "CA",
        country: "USA"
    });
}

}

This throws the following error:

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

This code above (in the onPress) is copied from the official firestore docs, here: https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document

Does anyone have an idea why this does not work?

ErnestoC · Accepted Answer · 2021-11-10 20:53:15Z

I suggest you edit your post and remove the firebaseConfig configuration keys, or delete your Firebase app and create a new one from the Firebase console to secure your app. I tried to replicate your application using React, and I received the same error message. There were two changes I made to correct the error. The first one is inside the firebaseConfig file, the default export needs to be changed to a named export:

import { initializeApp } from "firebase/app"

const firebaseConfig = {
    //Project configuration keys
};

const app = initializeApp(firebaseConfig);

export { app }; // Change from a default to a named export

In addition, all the imports inside your component should come from the full Javascript SDK, not the lite version. The lite version has some limitations which can result in this specific error.

import { app } from "./firestore-config";
import { getFirestore, getDoc, doc } from "firebase/firestore";
import './App.css';

export default function App() {
  const firestoreDB = getFirestore(app);
  const docRef = doc(firestoreDB, "users", "testUser1");

  const getData = async () => {
    const data = await getDoc(docRef);
    console.log(data);
  }

  getData();
  return <div className="App"></div>;
}

You might also want to review this GitHub issue if you are using yarn to manage your dependencies.

Collectives™ on Stack Overflow

React Native: firestore/firebase Expected first argument to collection() to be a CollectionReference... how?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related