时间戳

首页 > 解决方案 > JS 中的 firebase 集成的“db is undefined”问题

javascript - JS 中的 firebase 集成的“db is undefined”问题

问题描述

我在我的个人网站上做一个小的联系表。我在将 firebase 数据库与表单集成时遇到问题。我阅读了文档并观看了一些 YT 教程，但我找不到错误。你能看看吗？我在控制台中收到“db is undefined”错误。

window.onload = function() {
  var firebaseConfig = {
      apiKey: "sampleValue",
      authDomain: "sampleValue",
      databaseURL: "sampleValue",
      projectId: "sampleValue",
      storageBucket: "sampleValue",
      messagingSenderId: "sampleValue",
      appId: "sampleValue",
      measurementId: "sampleValue"
  };

  firebase.initializeApp(firebaseConfig);
  let db = firebase.firestore;

  function submitForm() {
    // e.preventDefault();

    let nameEl = document.getElementById("InputName");
    let emailEl = document.getElementById("InputEmail");
    let subjectEl = document.getElementById("InputSubject");
    let messageEl = document.getElementById("InputMessage");

    let nameValue = nameEl.value;
    let emailValue = emailEl.value;
    let subjectValue = subjectEl.value;
    let messageValue = messageEl.value;

    db.collection("contact").doc().set({
        name: nameValue,
        email: emailValue,
        subject: subjectValue,
        message: messageValue
      })
      .then(function() {
        alert("dataSaved");
      })
      .catch(function() {
        alert("error");
      });
  }
  document.getElementById("submit").addEventListener("click", submitForm());
};

编辑 由于其他用户@KevinPeña和@Phix的帮助，我已经设法解决了这个问题：将丢失的firebase-firestore.js脚本放在index.html中

<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>

我意识到我的数据库中的设置不允许我从表单中推送任何内容，所以我将规则更改为

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

标签： javascriptfirebase

解决方案

稍微扩展一下 Pix 的评论。就在这儿：

firebase.initializeApp(firebaseConfig);
let db = firebase.firestore; // <- here

它应该是

let db = firebase.firestore()

您可以在Guides和Reference上找到它。

也在这里：

document.getElementById("submit").addEventListener("click", submitForm() /* <-over here */);

您不应该调用该函数，而是将其传递给 addEventListener （即只是它的名称）

document.getElementById("submit").addEventListener("click", submitForm);

否则页面加载时表单将被提交为空。单击按钮不会发生任何事情。

推荐阅读