Estoy buscando una manera de tener una ruta dinámica que se muestre para cada documento en una colección de Firestore usando la representación del lado del servidor.
Por ejemplo, existiría un documento llamado foo en test.com/foo en el componente de página [doc] . Cada vez que se agrega un documento, se debe poder acceder a él a través de su URL respectiva.
He probado este método pero no he podido hacerlo funcionar. También intenté implementar getServerSideProps pero no tuve mucho éxito, cualquier sugerencia sería apreciada.
Código del método anterior de la siguiente manera:
en pages/api/[doc].js
export default (req, res) => { db.collection("docs") .doc(req.query.name) .get() .then((doc) => { res.json(doc.data()); }) .catch((error) => { res.json({ error }); }); }; bajo pages/[shoal].jsx
import { useRouter } from "next/router"; import useSWR from "swr"; const fetcher = async (...args) => { const res = await fetch(...args); return res.json(); }; function Doc() { const router = useRouter(); const { name } = router.query; const { data } = useSWR(`/api/${name}`, fetcher); if (!data) { return "Loading..."; } return ( <div> <p>Title: {data.title}</p> </div> ); } export default Doc;Puedes intentar usar getServerSideProps :
export const getServerSideProps = async (ctx) => { const doc = await db.collection("docs").doc(ctx.query.id).get() const data = doc.data() if (!data) return { notFound: true }; return { props: { data } }; }; function Doc({data}) { const router = useRouter(); const { name } = router.query; if (!data) { return "Loading..."; } return ( <div> <p>Title: {data.title}</p> </div> ); } export default Doc;Solución simple.
const { data } = useSWR(api ? '/api/${name}' : null, fetcher);Obtenga los datos condicionalmente si su variable está definida, si no, no pase una cadena de URL, mejor aún; también puede considerar condicionalmente el buscador para su uso.
const { data } = useSWR(name ? '/api/${name}' : null, name ? fetcher : null);