I am currently working on displaying my data within a <p> element but I'm facing some challenges. I have been able to retrieve the data and log it in the console, however, when trying to display it further than just the document id, errors are being thrown
<script>
// Import the necessary functions from the required SDKs
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
import { onMount } from 'svelte';
import { collection, addDoc, onSnapshot, getDocs, doc, getDoc, query, where } from "firebase/firestore";
let db;
onMount(async() => {
const firebaseConfig = {
////
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
db = getFirestore(app);
const querySnapshot = await getDocs(collection(db, "songs"));
querySnapshot.forEach((doc) => {
// Ensure that doc.data() is not undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
document.getElementById('data').innerHTML = doc.data();
});
});
</script>
<p id="data">LOADING...</p>