I'm having trouble changing this code from firebase v8 to the modular version of firebase v9 in reactjs.

const uploadFirestore = useCallback(async() => {
  await db.collection('users').doc(res.user.uid).collection('tareas').add({
    name: 'Test Task',
    fecha: Date.now()
  })
})

And i want to convert it to firebase 9 modular, also pass the userUid in the collections.

I was trying making it this way:

import React, { useCallback } from 'react'
import { db } from "./firebase"
import { collection, doc, addDoc } from "firebase/firestore"; 

function App(props) {
  const uploadFirestore = useCallback(async() => {
    await addDoc(doc(db, 'users', props.user.uid, 'tareas'), {
      name: 'Test Task',
      fecha: Date.now()
    })
  })
  
  return (
    <div>
      <button onClick={uploadFirestore}>
        Upload
      </button>
    </div>
  )
}

export default App

This is my firebase.js:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';


const firebaseApp = initializeApp({
    hidden api uwu
  });


const db = getFirestore(firebaseApp);

export { db }

But it throws a:

TypeError: n.indexOf is not a function

Any help?

CodePudding user response：

This looks wrong:

addDoc(doc(db, 'users', props.user.uid, 'tareas'), ...

You're trying to add a document to a document, which has two problems:

1. Documents can only be added to a collection, not to other documents.
2. You're passing a path to a collection (tareas) to the call to doc.

What you want here is:

addDoc(collection(db, 'users', props.user.uid, 'tareas'), ...