使用Javascript和Firebase Firestore检索和显示数据

Question

无论我做什么，我都无法显示我的数据。在我的HTML中，我设置了这个空列表:

<div class="reviews" style="margin-top: 40px;">
<ul id="reviews-list"></ul>
</div>

这是我为JS写的:

// load
const querySnapshot = await getDocs(collection(db, "reviews"));
querySnapshot.forEach((doc) => {
createFormData(doc);
})
const formData = document.querySelector('.reviews');
function createFormData(doc) {
let div = document.createElement('DIV');
let title = document.createElement('span');
let hall = document.createElement('span');
let content = document.createElement('span');
title.textContent = doc.data().title;
hall.textContent = doc.data().hall;
content.textContent = doc.data().content;
div.appendChild(title);
div.appendChild(hall);
div.appendChild(content);
formData.appendChild(div);
}

有人能帮忙吗?

我尝试了多个Youtube视频和其他来源在ul中显示我的数据库数据，它要么给出错误，要么什么也没发生。

Answer 1

try this

const formData = document.querySelector('.reviews');
createFormData()
async function createFormData() {
const querySnapshot = await getDocs(collection(db, "reviews"));
querySnapshot.forEach((doc) => {
const div = document.createElement('DIV');
const title = document.createElement('span');
const hall = document.createElement('span');
const content = document.createElement('span');
title.textContent = doc.data().title;
hall.textContent = doc.data().hall;
content.textContent = doc.data().content;
div.appendChild(title);
div.appendChild(hall);
div.appendChild(content);
formData.appendChild(div);
})
}