Firebase error Function CollectionReference.doc()

Question

The following project in react connecting with firebase is having the following issues code. Once the enter button is clicked to submit the message it bring back the error from the database.(picture bellow) . I created the collection "rooms" and I am trying to access with db.collection("rooms").doc(channelId).collection({ }) line 17 which is bringing back the error from firebase.

what does this error message means? FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: true

I removed firebase.ps1 file an logged back. created a new db.collection still the same.

import React, { useState } from "react";
import "./ChatInput.css";
import db from "./firebase";
import { useStateValue } from "./StateProvider";
import firebase from "firebase";
import { Button } from "@material-ui/core";

function ChatInput({ channelName, channelId }) {

    const [input, setInput] = useState("");
    const [{ user }] = useStateValue();


    const sendMessage = (e) => {
        e.preventDefault();

        if (channelId) {
              db.collection("rooms").doc(channelId).collection({
                message: input,
                timestamp: firebase.firestore.FieldValue.serverTimestamp,
                user: user.displayName,
                userImage: user.photoURL,
             });
         }

         setInput("");

    };


    return (
        <div className="chatInput">

            <form>
                
                <input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder={`Message #${channelName?.toLowerCase()}`} />

                    <Button type="submit" onClick={sendMessage}>
                        SEND</Button>

            </form>

        </div>
    );
}

export default ChatInput;

**also added the following code and still getting the same issue Changes made changes made 2

function collectionreference-error firebase error

Answer 1

import React, { useState } from "react";
import "./ChatMsg.css";
import db from "./firebase";
import firebase from "firebase";
import { useStateValue } from "./stateProvider";

function ChatMsg({ channelName, channelId }) {
  const [input, setInput] = useState("");
  const [{ user }] = useStateValue();
  const sendMessage = (e) => {
    
    e.preventDefault();
    if (channelId) {
      db.collection("rooms").doc(channelId).collection('messages').add({
        message: input,
        user: user.displayName,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        userimage:user.photoURL
        
       
      });
            
    }
  };

  return (
    <div className="chatInput">
      <form>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder={`Message # ${channelName}`}
        />
        <button type="submit" onClick={sendMessage}>
          SEND
        </button>
      </form>
    </div>
  );
}
export default ChatMsg;

Answer 2

what does this error message means? FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: true

It means that you need to pass a String as argument of the doc() method.

You are passing channelId to the doc() method and it seems it is a boolean with value true. You need to pass a String which represents the ID of the Firestore Document. I guess it is channelName, isn't it?

---

In addition, there is another problem in your code: you are passing a JavaScript object to the collection() method.

---

If you want to "submit a message", you need, for example, to call the add() method on the CollectionReference.

Something like the following (we don't know the subcollection name you want to use, let's take 'messages'):

db.collection("rooms").doc(channelName).collection('messages')
  .add({
       message: input,
       timestamp: firebase.firestore.FieldValue.serverTimestamp,
       user: user.displayName,
       userImage: user.photoURL,
  }); 

---

I would suggest that you have a look at the doc: https://firebase.google.com/docs/firestore/manage-data/add-data