0

Buenas estoy haciendo un pequeño proyecto con firebase y firestore, pero no logro poder eliminar documentos de firestore. Puedo añadir y ver los documentos que agregue, pero no borrarlos. Adjunto foto de como esta mi base de datos.

firestore del proyecto

funcion para borrar

  const borrarServicio = async (id) => {
    const updatedServices = services.filter((service) => service.id !== id);
    setServices(updatedServices);

    const borrarFirestore = async (service) => {
      await deleteDoc(doc(db, "Servicios", service.id));
    };

    borrarFirestore();
  };

return (
    <div className="peluqueria">
      <h2 className="subtitulos">{categoria}</h2>
      <ServicioForm onSubmit={agregarServicio} />
      <div>
        {services.map((service) => (
          <ServicioSolo
            key={service.id}
            id={service.id}
            texto={service.servicio}
            precio={service.precio}
            agregarServicio={agregarServicio}
            borrarServicio={borrarServicio}
          />
        ))}
      </div>
    </div>
  );

si cambio manualmente el service.id por el id del documento se borra exitosamente, osea que la funcion funciona. Al ejecutar mi codigo me tira este error ServiciosLista.js:51 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')

Espero que me puedan ayudar. muchas gracias!!

Copmponente ServicioSolo :

const ServicioSolo = ({ texto, precio, id, borrarServicio }) => {
  return (
    <div>
      <ol className=" list-group">
        <li className="list-group-item d-flex justify-content-between align-items-start">
          <div className="ms-2 me-auto">
            <div className="fw-bold">{texto}</div>
          </div>
          <span className="badge bg-dark rounded-pill precios">{precio}</span>
          <span
            className="badge bg-warning rounded-pill eliminar "
            onClick={() => borrarServicio(id)}
          >
            Eliminar
          </span>
        </li>
      </ol>
    </div>
  );
};

export default ServicioSolo;

1 respuesta 1

0

Quizás sea este parte del error o la total causa:

const borrarServicio = async (id) => {

    const updatedServices = services.filter((service) => service.id !== id);

    setServices(updatedServices);

    await deleteDoc(doc(db, "Servicios", id));

};

La funcion borrarServicio es una funcion asincrona que recibe el id del documento a borrar, en dicha función ocurre lo siguiente:

  • Filtras todos los documentos cuyo id sea distinto al que deseas eliminar.
  • El resultado lo asignas al estado que almacena los servicios
  • Luego tienes otra función asincrona para eliminar el documento en firebase (esto lo puedes hacer directamente empleando el await y pasando el id que recibe la función principal

**Pero si tu función borrarServicio no está recibiendo ese id, debes revisar que esta pasando en el componente ServicioSolo. Si llegas a colocar ese componente en la pregunta y esta respuesta no es de ayuda realizare la actualización necesaria.

2
  • recien le agruegue el codigo del componente a la pregunta
    – guido
    Commented el 12 nov. 2022 a las 19:42
  • ya lo pude solucionar. El problema principalmente estaba en la funcion que es para agregar servicios, ya que no estaba agregando el id a cada servicio. Por esto la funcion para borrar no estaba recibiendo ningun id. Muchas gracias por tu respuesta! Me hizo fijarme de si estaba recibiendo id o no. La marcare como valida!
    – guido
    Commented el 12 nov. 2022 a las 20:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.