Firestore CollectionReference and DocumentReference types missing .add(), .set(), .update(), etc met-CodePudding

I am using Firestore with React and Typescript. I'm trying to get some data from a firestore and update it. I have seen a lot of examples online using a syntax with methods but my IDE shows that those types don't have these methods.

I am able to get the data from Firestore using functions like this:

import { getFirestore, collection, doc, updateDoc } from 'firebase/firestore';

const firestore = getFirestore(config);

function App() {
  const collRef = collection(firestore, 'collection');
  const docRef = doc(firestore, 'collection/id');
  updateDoc(docRef, { test: 1234 }).then(x => console.log(x));
}

But I have seen a lot of examples that chain methods like this:

firebase.firestore().collection('collection').doc('id').set({ test: 1234 });

My IDE indicates that none of the types in this chain has any of these methods. Even the official documentation indicates that the Reference types should have the .get(), .set() and .update() methods but they aren't present.

This should be simple but I'm missing something very basic. What am I doing wrong?

CodePudding user response：

The chaining method you are referring to is the older namespaced syntax. The new Modular SDK (v9.0.0 ) uses the functional syntax as in your first code snippet.

You can still use the older syntax using compat version by changing your imports to:

import firebase from "firebase/compat/app"
import "firebase/compat/auth"
// import "firebase/compat/[SERVICE]"

However, it's recommended to update your code to new syntax to get benefits of tree shaking. Checkout the documentation for more information.