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

Question

这是我的 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 放置在我的真实项目中的相同代码会显示错误

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

Answer 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>