Skip to main content
se añadieron 812 caracteres en el cuerpo
Origen Enlace
Mac32
  • 112
  • 11

Así modifiqué el codigo:

React.useEffect(async() => {

    //Variable para establecer en que colleccion debe buscar y el documento a encontrar establecido de forma dinamica
    const  docRef = db.collection("fl_content").doc(id);

    //Se obtiene el documento
    await docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
          setPost(doc.data());
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
    // eslint-disable-next-line
  }, []);

Así modifiqué el codigo:

React.useEffect(async() => {

    //Variable para establecer en que colleccion debe buscar y el documento a encontrar establecido de forma dinamica
    const  docRef = db.collection("fl_content").doc(id);

    //Se obtiene el documento
    await docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
          setPost(doc.data());
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
    // eslint-disable-next-line
  }, []);
Origen Enlace
Mac32
  • 112
  • 11

paginas dinámicas en nextjs

Tengo un pequeño inconveniente... estoy haciendo un blog con nextjs y firestore. Hasta el momento todo marcha bien. El problema es que tengo un archivo [id].js para cargar las publicaciones de forma dinamica y funciona. El problema es... que cuando intento acceder directamente a la publicacion con la url o recargo la pagina de la publicación no me carga la informacion: Muestra de resultados de recargar pagina

Aqui les dejo el codigo que utilizo:

import React from "react";
import db from "../../firestoreConfig/FirestoreConfig.js";
//Importacion necesaria para capturar los datos del enlace dinamico
import { useRouter } from "next/router";
import PostFooter from "../../components/PostFooter.js";

const Post = () => {
  const [post, setPost] = React.useState([]);

  //Implementacion de useRouter para poder capturar la variable id y poder usarla
  const router = useRouter();
  const { id } = router.query;

  React.useEffect(() => {
    //Variable para establecer en que colleccion debe buscar y el documento a encontrar establecido de forma dinamica
    const docRef = db.collection("fl_content").doc(id);

    //Se obtiene el documento
    docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
          setPost(doc.data());
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
    // eslint-disable-next-line
  }, []);

  return (
    <div className="container is-fluid">
      <div>
        <hr />
        <div>
          <h2 className="title is-2 is-center">{post.titulo} </h2>
          <hr />
        </div>
        <figure className="image is-3by1">
          <img src={post.urlImage} alt={post.descriptionImage} />
        </figure>
        <div dangerouslySetInnerHTML={{ __html: post.contenido }}></div>
      </div>
      <PostFooter autor={post.autor} />
    </div>
  );
};

export default Post;

Como puedo hacer para que cuando recargue o acceda directamente con la url cargue la informacion?