Any help my in this error Next.js React

import React from "react";
import { useRouter } from "next/router";
import { useEffect, useContext, useState } from "react";
import { db } from "../../firabase/firebase";
import { doc, getDoc, updateDoc } from "firebase/firestore";
import Error404 from "../404";
import styled from "@emotion/styled";
import formatDistanceToNow from "date-fns/formatDistanceToNow";
import { es } from "date-fns/locale";
import { FirebaseContext } from "../../firabase";
import { Campo, InputSubmit } from "../../components/ui/Formulario";
import Boton from "../../components/ui/Boton";

const ContenedorProducto = styled.div`
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 2rem;
  }
`;

const Post = () => {
  const [producto, guardarProducto] = useState({});
  const [error, guardarError] = useState(false);
  const router = useRouter();
  const { pid } = router.query;
  const { usuario } = useContext(FirebaseContext);
  const docRef = doc(db, "productos", `${pid}`);

  useEffect(() => {
    // Si quieres evitar los muchos console.log y repeticiones de los valores en consola
    // Tan solo usa un useEffect un if para verificar si este elemento existe y ponlo como dependencia
    if (pid) {
      const obtenerProducto = async () => {
        const docSnap = await getDoc(docRef);
        if (docSnap.exists) {
          guardarProducto(docSnap.data());
          guardarError(false);
        } else {
          guardarError(true);
        }
      };
      obtenerProducto();
    }

    console.log("Pase por aqui");
  }, [pid]);

  console.log(usuario);

  const {
    comentarios,
    creado,
    descripcion,
    nombre,
    url,
    imagenURL,
    votos,
    creador,
    haVotado,
  } = producto;
  console.log(producto);

  return (
    <>
      {producto ? (
        <>
          {error && <Error404 />}
          <div className="contenedor">
            <h1 style={{ textAlign: "center", marginTop: "5rem" }}>{nombre}</h1>
            <ContenedorProducto>
              <div>
                <p>
                  Publicado hace:{" "}
                  {formatDistanceToNow(new Date(creado), {
                    locale: es,
                  })}
                </p>
                <p>Por: {creador.nombre}</p>
                <img src={imagenURL} />
                <p>{descripcion}</p>

                {usuario && (
                  <>
                    <h2>Agrega tu comentario</h2>
                    <form action="">
                      <Campo>
                        <input type="text" name="mensaje"></input>
                      </Campo>
                      <InputSubmit type="submit" value="Agregar Comentario" />
                    </form>
                  </>
                )}

                <h2 style={{ margin: "2rem 0" }}>Comentarios</h2>
                {comentarios.map((comentario) => (
                  <li>
                    <p>{comentario.nombre}</p>
                    <p>Escrito por: {comentario.usuarioNombre}</p>
                  </li>
                ))}
              </div>
              <aside>
                <Boton target="_blank" bgColor="true" href={url}>
                  Visitar URL
                </Boton>

                <div style={{ marginTop: "5rem" }}>
                  <p style={{ textAlign: "center" }}>{votos} Votos</p>
                  {usuario && <Boton>Votar</Boton>}
                </div>
              </aside>
            </ContenedorProducto>
          </div>
        </>
      ) : (
        <p>Cargando...</p>
      )}
    </>
  );
};

export default Post;

when i put this code get my a error Invalid time , this error apper like my product dont load in the state in useEffect have delay many second to call the product of the db, how to solve this error? thnks

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.