javascript - 在 firebase firestore 中保存数据时控制台出现错误

Question

这是我的 JavaScript 代码。它只是从 firebase 文档复制

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

当我刷新页面时，它显示 Uncaught Error 。

{code: "app/duplicate-service", message: "Firebase: Firebase service named 'firestore' already registered (app/duplicate-service).", name: "firestore", stack: "firestore: Firebase: Firebase service named 'fires…m/firebasejs/5.3.0/firebase-firestore.js:1:326255"} firebase @ index.esm.js:17591 (anonymous) @ index.esm.js:41 index.esm.js:17591

Uncaught Error: Cannot instantiate firebase-firestore - be sure to load firebase-app.js first.

单击“保存”按钮后，它显示下面提到的错误。

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

[Intervention] Slow network is detected. See for more details. Fallback font will be used while loading:

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>