Firebase Firestore db.collection is not a function

I am developing a shift scheduler and I use firebase authentication and firestore. My idea is that when a user signs up it creates a document in collection “workers” and sets the doc id to the user’s email. When the user adds a shift I want to add the shift info into a sub-collection “shifts” inside that user’s document where all the shifts will be stored. I have read and seen many guides but I can’t get the syntax/logic right, and due to firebase changes of syntax I am including most of the settings I use.

firebase.js:

import { getAuth } from "firebase/auth";
import "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"
require('firebase/auth');

const firebaseConfig = {
  ...
};
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth(app);
export default app

SignUp.js:

import { db } from "../firebase";
import { collection, addDoc, setDoc, doc } from "firebase/firestore";
import { useAuth } from '../contexts/AuthContext';
const { signup } = useAuth();  
 
    const handleSubmit = async (event) => {
    event.preventDefault();
    setError("");
      try{
        const data = new FormData(event.currentTarget);
        await signup ( data.get('email'), data.get('password'));
        const docRef = await setDoc(doc(db, "workers", data.get('email')), {
            firstName: data.get('firstName'),
            lastName: data.get('lastName'),
            email: data.get('email'),
            numberOfShifts: 0
        });
      }
      catch(e){
          console.error("Error adding document: ", e);
          setError("Failed to create an account");
      };

The sign up works nicely and the document id is the email. The error is when I try to add shift to that document (the collection shifts is not created at this stage)

Datasheed.js: (where the user inputs their shifts)

import { auth } from "../firebase"
import { db } from "../firebase";

const commitChanges = async ({ added, changed, deleted }) => {
      if (added) {
        try {
          db.collection("workers")
          .doc(auth.currentUser.email)
          .collection("shifts")
          .add(added);
        } catch (e) {
          console.error("Error adding document: ", e);
        }
      }

For now I am only trying to add, and the caught exception I am getting is: Error adding document: TypeError: firebase__WEBPACK_IMPORTED_MODULE_5_.db.collection is not a function. From what I have read the problem is that I use firebase modular and it doesn’t have db.collection anymore and it uses collection refs. Do I need the collection ref for the sub-collection as well? What changes do I need to do in order to implement this?

Answer

You are using Modular SDK and also modular syntax in signup.js. You should use the same syntax everywhere else. Try refactoring like this:

const commitChanges = async ({ added, changed, deleted }) => {
  if (added) {
    try {
      await addDoc(collection(db, "workers", auth.currentUser.email, "shifts"), added)
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }
}

You can learn more about the new syntax in the documentation.

Advertisement

Answer