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

在 Firestore 数据库中添加新条目您正在关注哪个 Firebase 教程？这不是您将数据添加到 Firebase 的方式。替换add()为set()对于自动生成的 ID将你的无作为参数传递给doc()// For automatically generated iddb.collection('links')&nbsp; .doc()&nbsp; .set({ link: newLink })&nbsp;&nbsp;&nbsp; .then(() => {&nbsp; // fetch the doc again and show its data&nbsp; &nbsp; ref.get().then(doc => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(doc.data())&nbsp; // prints {link: newLink, id: 1321415}&nbsp; &nbsp; })&nbsp; })使用您自己的 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")&nbsp; .doc(date.getTime())&nbsp; .set({&nbsp; &nbsp; link: newLink&nbsp; })

Answer 2

根据官方文档Set a Document指示，您需要使用 方法set()将文档添加到您的集合中。以下是数据库中插入的一个示例 - 文档位于 Node.js 中，但我相信它应该可以帮助您作为起点。let data = {&nbsp; link: 'Link you want',&nbsp; id: 'Id you want'};let setDoc = db.collection('link').doc('Id').set(data);这只是一个将文档添加到集合的简单示例，但它应该可以帮助您理解您的逻辑。除此之外，在以下文章中，您应该获得有关如何在 Firestore 上执行查询的更多信息。开始使用 Cloud Firestore添加数据让我知道这些信息是否对您有帮助！