Previously in Firebase you could add a document like this:

const myNewDoc = await db.collection('some-collection-name').add({ //Document details here... });

With the introduction of Firebase 9 this no longer works.

Instead of .add I think I am supposed to use an imported .addDoc method.

But it seems I cannot chain .addDoc onto .collection.

If I try to do something like this:

const myNewDoc = await db.collection('some-collection-name').addDoc({ //Document details here... });

TypeScript throws this error:

Property 'addDoc' does not exist on type 'CollectionReference<DocumentData>'.ts(2339)

I could create something more verbose like this:

const someCol = collection(db, "some-collection-name");
const newDoc = await addDoc(someCol, {
    //Document details here...
});

But I would rather "chain" it like before.

Is that possible? How would it be done?

And should I even be using .addDoc? Or something else?

Previously in Firebase you could add a document like this:

const myNewDoc = await db.collection('some-collection-name').add({ //Document details here... });

With the introduction of Firebase 9 this no longer works.

Instead of .add I think I am supposed to use an imported .addDoc method.

But it seems I cannot chain .addDoc onto .collection.

If I try to do something like this:

const myNewDoc = await db.collection('some-collection-name').addDoc({ //Document details here... });

TypeScript throws this error:

Property 'addDoc' does not exist on type 'CollectionReference<DocumentData>'.ts(2339)

I could create something more verbose like this:

const someCol = collection(db, "some-collection-name");
const newDoc = await addDoc(someCol, {
    //Document details here...
});

But I would rather "chain" it like before.

Is that possible? How would it be done?

And should I even be using .addDoc? Or something else?

• javascript
• firebase
• google-cloud-firestore

2 Answers 2

The addDoc() is a top level function in Modular SDK. Try refactoring your code like this:

import { collection, addDoc } from "firebase/firestore"; 

const newDoc = await addDoc(collection(db, "some-collection-name"), {
  // Document Data
});
console.log("Document written with ID: ", newDoc.id);

The documentation has examples of both name-spaced and the new syntax.

If you are using pat version to use older syntax then you would have to use add() itself.

import { Firestore, collection, collectionData, addDoc } from '@angular/fire/firestore';

firestore: Firestore = inject(Firestore);

addDoc(collection( this.firestore, 'some-collection-name'),Document details here
)