Uncaught (in promise) FirebaseError: Invalid document reference - reactjs

Question

import { getDocs, collection, query, doc, addDoc } from "firebase/firestore/lite";
import { useState } from "react";
import { db } from "../firebaseConfig";
import { useEffect } from "react";
function EndGame(startGame){
const {startGameHandler} = startGame;
const startGameClick = startGameHandler[0];
const time = startGameHandler[1];
const [leaderboard, setLeaderboard] = useState([]);
const [user, setUser] = useState("");
const [username, setUsername] = useState("")
const [isAnonymous, setIsAnonymous] = useState(false);
const loginAnonymously = () =>{
console.log("login hivas ", user)
setUser(username)
setIsAnonymous(true)
}
const setScore= async(timeprop, userprop)=>{
console.log(time, user)
await addDoc(doc(db, "Leaderboard"), {
name: userprop,
time: timeprop,
})
}
async function getLeaderboard(){
const q = query(collection(db, "Leaderboard"));
const chacSnapShot = await getDocs(q);
const char = chacSnapShot.docs.map(doc => doc.data());
setLeaderboard(char)
}
useEffect(()=>{
setScore(time, user)
getLeaderboard()
}, [isAnonymous])
return(
<div className={`endgame-page`}>
{!isAnonymous && (
<div className="endgame-div">
<input
type="text"
placeholder="Enter a username"
value={username}
onChange={e => setUsername(e.target.value)}
/>
<button onClick={loginAnonymously}>Login Anonymously</button>
</div>
)}
{isAnonymous && (
<div className="endgame-div">
<h1 className="endgame-heading">Leaderboard</h1>
<div className="endgame-leaderboard">
{leaderboard.map((data)=>{
return(
<div key={data.name} className="user-container">
<p className="username">{data.name}</p>
<p className="userdata">{data.time}</p>
</div>
)
})}
</div>
<button className="endgame-button" onClick={startGameClick} >Start Game</button>
</div>
)}
</div>
)
}
export default EndGame
So I have this endgame component and when it renders for some reasons the setScore function gets called and i think thats why i get a error of this:
Uncaught (in promise) FirebaseError: Invalid document reference. Document references must have an even number of segments, but Leaderboard has 1.
On line 27. Am i in the wrong here thinking its beacause of setScore gets called on render? If not what the problem/solution?
In firebase i have a Leaderboard collection inside that i want to create docs from users time and name, (each users should have 1 doc)

Answer 1

Method addDoc should have a collection reference not a document reference. You'd only use a document reference if you want to specify a document name into it and it should use setDoc instead, see sample code below:
const setScore= async(timeprop, userprop)=>{
console.log(time, user)
await setDoc(doc(db, "Leaderboard", "<document-name>"), {
name: userprop,
time: timeprop,
})
}
To correct this, check out the sample code below:
const setScore= async(timeprop, userprop)=>{
console.log(time, user)
await addDoc(collection(db, "Leaderboard"), {
name: userprop,
time: timeprop,
})
}
You may want to checkout this documentation for more information.