Hola a todos. Estoy creando una especie de página de blog y tengo problemas para recuperar datos de un solo elemento de la base de datos. Busqué una solución para este problema y simplemente no puedo encontrarla. En este proyecto uso firestore y react router. Esta es mi función de inicio (página de inicio), donde recupero elementos de la base de datos

 function Home({isAuth}) { const[articlesList, setArticleList] = useState([]) const articleCollectionRef = collection(db, 'articles') const deleteArticle = async (id) => { const articleDoc = doc(db, "articles", id) await deleteDoc(articleDoc) } useEffect(() => { const getArticles = async () => { const data = await getDocs(articleCollectionRef) setArticleList(data.docs.map((doc) => ({...doc.data(), id: doc.id}))) } getArticles() },[deleteArticle]) return <Grid container direction="row-reverse" justifyContent="space-evenly" alignItems="center" marginTop={2} > {articlesList.map((article) => { return( <Grid item alignItems="center" margin={1}> <Link to={`articles/${article.id}`} articlesList={articlesList} ><PostCard isAuth={isAuth} article={article} deleteArticle={deleteArticle}/></Link> </Grid> )})} </Grid> } export default Home;

Y aquí está mi componente de artículo único donde obtengo la identificación del artículo con useParams pero no sé cómo obtener el artículo en función de esa identificación

 const SingleArticle = () => { const { id } = useParams() return ( <> < h5>Post with id: { id }</h5> </> ) }