在 Firebase Firestore 中保存数据时在控制台上出现错误

Posted 2023-03-22

【中文标题】在 Firebase Firestore 中保存数据时在控制台上出现错误

【英文标题】：Getting an Error on console while saving data in firebase firestore

【发布时间】：2019-02-12 10:18:47

【问题描述】：

这是我的 javascript 代码。它只是从 firebase Docs 中复制的

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
<script>
  // Initialize Firebase
    var config = 
        apiKey: ".",
        authDomain: ".",
        databaseURL: ".",
        projectId: ".",
        storageBucket: ".",
        messagingSenderId: ".[enter image description here][1]"
    ;
  firebase.initializeApp(config);

    // Initialize Cloud Firestore through Firebase
    
    var db = firebase.firestore();
    function submitCountry()
    console.log('in funtion');
    db.collection("cities").doc("asdasLA").set(
        name: "Los Angeles",
        state: "CasdasA",
        stasdaate: "CasdasdasA",
        stasaasddaate: "CAasd",
        country: "USA"
    )
    .then(function() 
        console.log("Document successfully written!");
    )
    .catch(function(error) 
        console.error("Error writing document: ", error);
    );

</script>

当我刷新页面时，它会显示未捕获的错误。

code: "app/duplicate-service", message: "Firebase: Firebase 服务 名为“firestore”的已注册（应用程序/重复服务）。”，名称： "firestore", stack: "firestore: Firebase: Firebase 服务命名 '火灾...m/firebasejs/5.3.0/firebase-firestore.js:1:326255" firebase @ index.esm.js:17591（匿名）@ index.esm.js:41 index.esm.js:17591

未捕获的错误：无法实例化 firebase-firestore - 请务必 首先加载 firebase-app.js。

点击我的保存按钮后，它会显示下面提到的错误。

当我在没有任何 JS 或 Bootstrap 的简单项目中使用相同的代码时，它可以正常工作，但是我使用 Bootstrap 放置在我的真实项目中的相同代码会显示错误

[干预] 检测到慢速网络。有关更多详细信息，请参阅。 加载时将使用后备字体：

【问题讨论】：

什么错误.....

@Badgy 我发布了我的错误。

【参考方案1】：

通过做

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

您两次加载“firestore”Firebase 服务，请参阅文档：https://firebase.google.com/docs/web/setup

你应该这样做

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>

或

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>

另请注意，您的代码中有混合版本（即 5.4.2 和 5.3.0）。很可能是要避免的事情。

---

根据您在下面的评论，为了检查它是否正确写入数据库，修改您的代码如下并打开 html 页面（set() 方法将自动触发）

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

<script>
  // Initialize Firebase
    var config = 
        apiKey: ".",
        authDomain: ".",
        databaseURL: ".",
        projectId: ".",
        storageBucket: ".",
        messagingSenderId: ".[enter image description here][1]"
    ;
    firebase.initializeApp(config);

    // Initialize Cloud Firestore through Firebase

    var db = firebase.firestore();

    db.collection("cities").doc("asdasLA").set(
        name: "Los Angeles",
        state: "CasdasA",
        stasdaate: "CasdasdasA",
        stasaasddaate: "CAasd",
        country: "USA"
    )
    .then(function() 
        console.log("Document successfully written!");
    )
    .catch(function(error) 
        console.error("Error writing document: ", error);
    );

</script>

【讨论】：

您是否设置了一些特定的安全规则来阻止写入？

你在调用submitCountry()函数吗？我也看到你没有正确结束函数。

是的，我正在调用 Submit Country()

然后应该保存数据

您是否尝试使用我在答案中提供的 HTML 页面？为 config 对象输入正确的值，将其保存为 html 在您的计算机上，然后使用您选择的浏览器打开它。它应该写入数据库。