Ya tengo un forEach que muestra una imagen y un nombre en el que se puede hacer clic y lo lleva a una página ../página/detalles.

Una vez que haga clic en esa página (que sería la misma página para todas las imágenes y nombres), quiero cargar los datos específicos con ese documento en el que se hizo clic desde Firestore.

Entiendo que probablemente necesitaría crear un identificador y luego mostrarlo en la página de detalles para que sepa en qué se hizo clic (puedo hacer esto rápidamente), pero como los modelos no se usan en JS, ¿cómo le permito entender? qué contenido debe mostrar.

Como todas las imágenes y los nombres irían a la misma página de detalles, también sería una forma de agregar la identificación aleatoria del documento a la URL para que se vea como ../page/details/Djf73Dhr7W8sJie6c3H9

Código para obtener forEach y la página de detalles en la que se puede hacer clic

 const i = query(collection(db, "teams")); const unsubscribe = onSnapshot(i, (querySnapshot) => { const teams = document.querySelector('.teams'); querySnapshot.forEach((doc) => { const docData = doc.data(); const team = teams.appendChild(document.createElement('teams')); team.innerHTML = ` <a href="../page/detail.html"> <h1 class="team-names"></h1> </a> <div class="team-line"></div> <img class="team-image"> `; team.children[0].textContent = docData.ageGroup; team.children[2].src = docData.teamImage; console.log("Current data: ", docData); }); });

Donde muestro el forEach

 <div class="teams"> </div>