Quiero obtener un documento de firebase en la representación de la página, que obtengo primero (después de un botón), pero después de actualizar la página aparece este error:

 Unhandled Runtime Error TypeError: can't access property "indexOf", n is undefined Source pages\[id].js (14:19) @ Id/< 12 | 13 | useEffect(() => { > 14 | const docRef = doc(db, "posts", id); | ^ 15 | 16 | onSnapshot(docRef, (doc) => { 17 | console.log(doc.data())

mi código es:

cuando funciona bien, voy a la página haciendo clic en este div:

 <div key={post.id} onClick={(target) => { userPost = post; router.push(post.id); }} className='pop-out h-[150px] w-[300px] mb-5 md:mb-5 lg:mb-5 md:h-[150px] md:w-[400px] lg:h-[150px] lg:w-[400px] border-2 cursor-pointer rounded-md m-auto md:m-auto lg:m-0' > <h2 className='text-[30px] ml-5 mt-10 text-[gray]'>{post.title}</h2> <div className='relative border-0 border-t-2 border-t-orange-500 w-auto top-[30px] md:top-[30px] md:h-[50px] lg:h-[50px] lg:top-[30px] text-orange-500'> <div className='ml-2'>by {post.author}</div> <ArrowRightIcon className='relative w-9 top-[-30px] left-[250px] md:left-[350px] lg:left-[350px] text-orange-500' /> </div> </div>;

pero ahora, si actualizo, aparece el error anterior. Resto del código aquí:

fbconfig.js:

Exporto la base de datos const

 export const db = getFirestore()

componente de ruta dinámico [id]:

 const Id = () => { const router = useRouter(); const { id } = router.query; const [post, setPost] = useState(null); useEffect(() => { const docRef = doc(db, 'posts', id); onSnapshot(docRef, (doc) => { console.log(doc.data()); setPost(doc.data()); }); }, []); return ( <> <Header /> {post && ( <div className='relative text-white left-[40%] top-[100px] w-[500px] mb-10'> <div className=''> {post.title} · {post.author} · Link: <a target='_blank' rel='noreferrer' className='text-blue-400' href={post.link} > <i> {post.link}</i> </a> </div> <br /> <div className='' dangerouslySetInnerHTML={{ __html: post.content }} ></div> </div> )} </> ); }; export default Id;