Soy nuevo en React y Firebase, y tuve un problema en el que no se llama a la función de eliminación de documentos y no se detectaron errores. La función deleteItemHandler( ) se ejecuta, pero deleteDoc( ) no. Cambié las reglas y me aseguré de que las importaciones sean correctas, pero aún así no funciona.
deleteItemHandler( ), App.jsx
//? Delete item function const deleteItemHandler = async (id) => { try { await deleteDoc(doc(db, "items", id)); } catch (error) { console.log(error); } }Botón Eliminar, YourCard.jsx
<button className="btn btn-danger ms-2" onClick={() => { // console.log(props.name) props.deleteItemHandler(props.id) }} > Delete </button>Nota de actualización: accesorios que pasan App.jsx a UserIdentity.jsx
<UserIdentity className="userId" currentUser={username} loginHandler={loginHandler} logoutHandler={logoutHandler} addListingHandler={addListingHandler} //? for YourCard itemsFromDB={itemsFromDB} deleteItemHandler={deleteItemHandler} />UserIdentity.jsx a YourCard.jsx
{yourItems.map((item) => { return ( <YourCard // className="YourCard" name={item.name} id={item.id} key={item.id} deleteItemHandler={props.deleteItemHandler} /> ); })}Estoy pensando que no estás manejando los accesorios correctamente.
const App = () => { const deleteItemHandler = async (id) => { await deleteDoc(doc(db, "cities", id)); } return ( <YourCard deleteItemHandler={deleteItemHandler} id={someId}} )niño
export const YourCard = ({deleteItemHandler, id}) => { return ( <button className="btn btn-danger ms-2" onClick={() => deleteItemHandler(id)} > Delete </button> )Finalmente descubrí que el problema radica en addDoc() , que agrega un nuevo documento con tipo yc2 mientras que deleteDoc() busca documentos con tipo mc2 . Cambió el método de agregar a setDoc() para arreglarlo.