Firebase JS - Firebase fails to insert in firestore

user_6689583 0
Viewed 1800

I am using pure Javascript to insert documents in a firestore collection without authentication. Reading real time data functions as it should with no trouble but inserting a document doesn't seem to work. What is wrong here?

This is the console output:

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

I tried another onClick method from the javascript by getting the element ID of the button and submitting the click and this is the console log I got:

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

this is JS followed by 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>

google-cloud-firestore firebase web javascript
1 Answers

Firebase is most likely erroring out on the doc ID you are using.

.doc(Date.now())

In this line, Date.now() is a number, but document IDs should always be strings.

In general, it's not a good idea to use timestamps as document IDs anyway as they are not guaranteed to be unique. if you need a unique document ID to be assigned, Firebase can do it for you if you use:

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)

user_46999450
Related