Trouble updating Doc in Firestore with React

Question

Im trying to edit a document in my firestore db. I get an error i cant figure out. Uncaught (in promise) FirebaseError: Expected type 'va', but it was: a custom Fh object

Im passing in an Object to the updateDoc function using the spread operator.

const saveEvent = React.useCallback(() => {
    console.log(isChecked)
    const checked = [];
    isChecked.map((item, index) => {
        if (item === true) {
            checked.push(index + 1)
        }
    })
    console.log(checked)
    const newEvent = {
        id: tempEvent.id,
        title: popupEventTitle,
        description: popupEventDescription,
        start: popupEventDate[0].toString(),
        end: popupEventDate[1].toString(),
        allDay: popupEventAllDay,
        status: popupEventStatus,
        color: selectedColor,
        resource: checked
    };
    if (isEdit) {
        // update the event in the list
        const index = myEvents.findIndex(x => x.id === tempEvent.id);
        const newEventList = [...myEvents];

        newEventList.splice(index, 1, newEvent);
        console.log(newEventList)
        setMyEvents(newEventList);

  // ISSUE IS IN THE UpdateEvent function
        const UpdateEvent = async () => {

            const userRef = collection(database, 'events');
            const q = query(userRef, where('id', '==', `${tempEvent.id}`));
            const querySnapshot = await getDocs(q);
            querySnapshot.forEach((doc) => {
                console.log(newEvent)
                updateDoc(doc, {
                    ...newEvent,
                });
            })
        }
        UpdateEvent()

    } else {
        // add the new event to the list
        setMyEvents([...myEvents, newEvent]);
        const getEvents = async () => {
            try {
                const docRef = await addDoc(collection(database, "events"), {
                    id: tempEvent.id,
                    title: popupEventTitle,
                    description: popupEventDescription,
                    start: new Date(popupEventDate[0]),
                    end: new Date(popupEventDate[1]),
                    allDay: popupEventAllDay,
                    status: popupEventStatus,
                    color: selectedColor,
                    resource: checked
                });
                console.log("Document written with ID: ", docRef.id);
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        }
        //console.log(newEvent)
        getEvents()
    }
    setSelectedDate(popupEventDate[0]);
    setOpen(false);
}, [isEdit, myEvents, popupEventAllDay, popupEventDate, popupEventDescription, popupEventStatus, popupEventTitle, tempEvent, selectedColor, isChecked]);

Im not sure whats wrong, and googling the issue gives me little to work with. I cant find anything about Expected type 'va', but it was: a custom Fh object anywhere. Not even in the documentation..

Any help greatly appreciated.

EDIT: Ater logging doc.query i noticed a small Va on the top of the document. Also a small "$h" when logging doc Anyone know anything more about that? Screenshots:

Answer 1

This occurs when you're updating a document with incorrect document reference. You should use ref property to get the document reference to properly update the document on your foreach loop. See snippet below:

const UpdateEvent = async () => {

  const userRef = collection(database, 'events');
  const q = query(userRef, where('id', '==', `${tempEvent.id}`));
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
      console.log(newEvent)
      // Here. You shouldn't use the doc object itself.
      // You must use the `reference` property to get the document reference to update to.
      updateDoc(doc.ref, {
          ...newEvent,
      });
  })
}
UpdateEvent()

For more information, you may checkout this documentation.

Answer 2

Try this // ISSUE IS IN THE UpdateEvent function const UpdateEvent = async () => {

        const userRef = collection(database, 'events');
        const q = query(userRef, where('id', '==', `${tempEvent.id}`));
        const doc = await getDocs(q);
        //querySnapshot.forEach((doc) => {
            console.log(newEvent)
            updateDoc(doc, {
                ...newEvent,
            //});
        })
    }
    UpdateEvent()

Answer 3

// ISSUE IS IN THE UpdateEvent function const UpdateEvent = async () => { const userRef = collection(database, 'events'); const q = query(userRef, where('id', '==',${tempEvent.id})); if you are using 'where' claouse then you will always get one doc const querySnapshot = await getDocs(q); const doc = await getDocs(q); try this
querySnapshot.forEach((doc) => { console.log(newEvent) updateDoc(doc, { ...newEvent, }); }) } UpdateEvent()