I'm creating an app with ReactJS. It's an e-commerce. After I add some product to the cart I have to complete the form to finish the order. That should send the information to Firebase and create a new collection, but I get the error

Uncaught FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a function (found in field total in document ventas/GPFfrRZ6mOd7fEZA9Y1a)

Here is the code I have in Cart:

import React, { useContext, useState, useEffect } from 'react';
import { CartContext } from '../../Context/CartContext';
import { doc, addDoc, collection, updateDoc, getFirestore } from 'firebase/firestore';
import Swal from 'sweetalert2';
import Form from '../Form';



const Cart = () => {
  const { cart, removeItem, emptyCart, totalCompra } = useContext(CartContext);
  
  const [idVenta, setIdVenta] = useState("");
  
  const finalizarCompra = () => {
    
    const db = getFirestore()
    
    const ventasCollection = collection(db, "ventas");
    addDoc(ventasCollection, {
      items: cart,
      total: totalCompra,
    }).then((result) => {setIdVenta(result.id)});

    cart.forEach((item) => {
      const updateCollection = doc(db, 'items', item.id)
      updateDoc(updateCollection,{
          stock: item.stock - item.quantity,
        })
    });
    
    emptyCart();
  }

  useEffect(() => {
    if (idVenta.length > 0) {
        Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: 'Se ha registrado la compra en el sistema con el siguiente id: '  idVenta,
            showConfirmButton: false,
            timer: 2000
        });
    }
})

  return (
    <>
      <div>Cart</div>
      {cart.map((product, key) => (
        <div key={key}>
          <div>{product.titulo}</div>
          <p>Precio por unidad: ${product.precio}</p>
          <p>Cantidad: {product.qty}</p>
          <button onClick={ () => {removeItem(product.id)}}>ELIMINAR</button>
        </div>
      ))}
      <button onClick={emptyCart}>VACIAR CARRITO</button>
      <p>PRECIO FINAL: ${totalCompra()}</p>
      <div>
        <Form fCompra={finalizarCompra} />
      </div>
    </>
  );
};
export default Cart;

CodePudding user response：

The error message is telling you that one of the fields you're trying to add using to a document using addDoc is actually function, which is invalid. My guess is that totalCompra is a function. What you have to do instead is pass a valid value, such as a string, number, boolean, object, array, or null. If you pass a function, Firestore will not invoke the function for you.

CodePudding user response：

Either cart or totalCompra is a function.

Since you are getting it from the context and it is not logged anywhere so it is difficult to say which of these or maybe both of these.

Try logging both the variables and make sure only proper values are passed.

Also, make sure that undefined is not passed as it is not allowed in addDoc as well.