Svelte App 可以读取 firebase 数据库，但不能添加

Question

你好 stackoverflow 社区。 我正在使用 Svelte、Materialize CSS 和 firebase 制作一个简单的数据库应用程序。 我能够从 firebase 数据库中读取数据，所以我知道这不是凭据问题，但是在使用下面的“addLink”函数时，数据库不会更新。警报也正确显示日期和 newLink 字符串。上下文中的代码也在下面。

function addLink() {
    alert(date.getTime());
    db.collection("links").add({ link: newLink, id: date.getTime() });
  }

<script>
  import GetForm from "../layout/GetForm.svelte";
  import TranslateButton from "../layout/TranslateButton.svelte";
  import { db } from "../firebase.js";

  let arrList = [];
  let newLink = "";
  let date = new Date();

  db.collection("links")
    .orderBy("id", "asc")
    .onSnapshot(snapData => {
      arrList = snapData.docs;
    });

  function addLink() {
    alert(date.getTime());
    db.collection("links").add({ link: newLink, id: date.getTime() });
  }
</script>

<div class="container right-align" style="margin-top: 30px;">
  <TranslateButton />
</div>
<div class="container" style="margin-top: 150px;">
  <div class="row">
    <div class="center-align">
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s10">
              <textarea
                id="textarea1"
                class="materialize-textarea"
                bind:value={newLink} />
              <label for="textarea1">Put your URL here.</label>
            </div>
            <button
              class="btn waves-effect waves-light col s2"
              on:click={addLink}>
              Send
              <i class="material-icons right">arrow_forward</i>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="center-align">
      <GetForm />
    </div>
  </div>

  <ul>
    {#each arrList as listItem}
      <li>{listItem.data().link}</li>
    {/each}
  </ul>

</div>

Answer 1

根据官方文档Set a Document 的说明，需要使用set() 的方法将文档添加到您的收藏中。下面是在数据库中插入的一个示例 - 文档位于 Node.js 中，但我相信它应该可以帮助您作为起点。

let data = {
  link: 'Link you want',
  id: 'Id you want'
};

let setDoc = db.collection('link').doc('Id').set(data);

这只是一个将文档添加到集合中的简单示例，但它应该可以帮助您理解您的逻辑。

此外，在以下文章中，您应该获得有关如何在 Firestore 上执行查询的更多信息。

• Get started with Cloud Firestore
• Adding Data

如果这些信息对您有帮助，请告诉我！

Answer 2

在 Firestore DB 中添加新条目

您正在关注哪个 Firebase 教程？这不是您将数据添加到 Firebase 的方式。将add() 替换为set()

对于自动生成的 ID

将你的无作为参数传递给doc()

// For automatically generated id
db.collection('links')
  .doc()
  .set({ link: newLink })  
  .then(() => {  // fetch the doc again and show its data
    ref.get().then(doc => {
        console.log(doc.data())  // prints {link: newLink, id: 1321415}
    })
  })

用于使用自己的 id

将您的 id 作为参数传递给 doc()

// Or you could set your own id, which is in your case,
// Pass your `id` as argument for `doc()`
db.collection("links")
  .doc(date.getTime())
  .set({
    link: newLink
  })

Add data to Cloud Firestore