Firebase JS - Firebase 无法插入到 Firestore [关闭]答案

【问题标题】：Firebase JS - Firebase fails to insert in firestore [closed]Firebase JS - Firebase 无法插入到 Firestore [关闭]
【发布时间】：2021-02-12 00:58:07
【问题描述】：

我正在使用纯 Javascript 将文档插入到 Firestore 集合中而无需身份验证。读取实时数据功能应该没有问题，但插入文档似乎不起作用。这里有什么问题？

这是控制台输出：

firebase-firestore.js:1 Uncaught TypeError: o.indexOf is not a function 在 Function.hi.q (path.ts:227) 在 Qd.doc (database.ts:2217) 在 createDoc (firebase.js:26) 在 HTMLFormElement.onsubmit (board.html:83)

我通过获取按钮的元素 ID 并提交点击尝试了另一个来自 javascript 的 onClick 方法，这是我得到的控制台日志：

VM1764 firebase-firestore.js:1 Uncaught TypeError: o.indexOf is not a function 在 Function.hi.q (VM1764 firebase-firestore.js:1) 在 Qd.doc (VM1764 firebase-firestore.js:1) 在 createDoc (VM1765 firebase.js:26) 在 HTMLButtonElement.document.getElementById.onclick (VM1765 firebase.js:17)

这是 JS 后跟 HTML：

//config
var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();

document.getElementById("postBtn").onclick = function() { createDoc() };

//insertion
function createDoc() {
    var usernameInput = document.getElementById("username_input").value;
    var jobTitleInput = document.getElementById("job_input").value;
    var timestampInput = Date.now();

    firebase.firestore().collection("humans").doc(Date.now()).set({
        job: jobTitleInput,
        timestamp: timestampInput,
        username: usernameInput,
    }).then(function() {
        console.log('document inserted');
        document.getElementById("data_section").innerHTML = '';
        fetchAllThreadsByTimestamp();
    }).catch(function(error) {
        console.error('document insertion error: ' + error);
    });
}

<form class="form">
                            <div class="row">
                                <div class="col-xs-8 col-md-10 ">
                                    <input type="text" id="username_input" placeholder="username" required/>
                                </div>
                            </div>
                            <br>
                            <div class="row ">
                                <div class="col-xs-8 col-md-10 ">
                                    <input type="text" id="job_input" placeholder="job title" required/>
                                </div>
                                <div class="col-xs-4 col-md-2">
                                    <button id="postBtn" class="btn">POST</button>
                                </div>
                            </div>
                        </form>

【问题讨论】：

没有调试信息，我们无能为力。 “似乎不起作用”是不够的。
@DougStevenson 你说得对，结果我不得不在检查控制台中调整一些设置来显示错误，我添加了输出
@DougStevenson 我在尝试另一种方式后刚刚提交了另一个编辑
哪一行代码导致了这个错误？
@DougStevenson HTML中的表单代码块，可能是因为表单在单击提交按钮时自动刷新页面？

标签： javascript firebase web google-cloud-firestore

【解决方案1】：

Firebase 很可能在您使用的文档 ID 上出错。

.doc(Date.now())

在这一行中，Date.now() 是一个数字，但文档 ID 应该始终是字符串。

一般来说，使用时间戳作为文档 ID 并不是一个好主意，因为它们不能保证是唯一的。如果您需要分配唯一的文档 ID，Firebase 可以为您完成，如果您使用：

firebase.firestore().collection("humans").add({ /* ... */ }).then(function(doc){
    // ...
    // note: you can get the new document ID by using doc.id
}).catch(function(error) {
    // ...
});

(relevant docs)

【讨论】：