如何在 Svelte 中显示来自 Firestore 的所有项目？

Question

我正在尝试制作一个待办事项应用程序。我可以在控制台中从 firebase 获取所有信息，但是我可以在 ui 中显示的唯一项目是最后一个。我怎样才能显示所有这些？

let msg 
let textinput
async function f() {
  try {
const docRef = await addDoc(collection(db, "users"), {
  name: textinput,
});
console.log("Document written with ID: ", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}}
onMount(async () => {
  
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
msg = doc.data().name
console.log(doc.id, " => ", doc.data());
});
});

<h1>
  this is for datebase
</h1>
<input type="text" bind:value={textinput}>
<p>{msg}</p>

ui and the console console_output

我尝试了 {#each querySnapshot as doc}，但未定义 querySnapshot

Answer 1

你有一个数组。 querySnapshot.docs 是一组查询结果 (docs)。

{#each querySnaphot.docs as doc}
  <li>{doc.id} => {doc.data().name}</li>
{/each}

或者

{#each querySnaphot.docs as doc}
  {@const {name} = doc.data()}
  <li>{doc.id} => {name}</li>
{/each}

奖金循环：
如果你有一个对象你可以循环：{#each Object.keys(obj) as key}
或者：{#each Object.entries(obj) as [key, value]}

更新查询快照：

const getQuerySnapshot = async () => {
  return await getDocs(collection(db, "users"));
}

let promise = getQuerySnapshot ();

getQuerySnapshot 箭头函数返回一个承诺。更多here。
要解决承诺，您可以：

{#await promise then guerySnapshot}
  {#each guerySnapshot.docs as doc}
    <li>{doc.id} => {doc.data().name}</li>
  {/each}
{/await}