Erreur Firebase non détectée dans Promise : référence de document non valide

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

J'ai donc ce composant de fin de partie et lors du rendu, pour une raison quelconque, la fonction setScore est appelée et je pense que c'est pourquoi j'obtiens l'erreur suivante :

Uncaught (promis) FirebaseError : référence de document invalide. Les références aux documents doivent avoir un nombre pair de segments, mais les classements en ont 1.

Sur la ligne 27. Ai-je tort de penser que c'est parce que setScore est appelé lors du rendu ? Si non, quel est le problème/la solution ?

Dans Firebase, j'ai une collection Leaderboard et je souhaite créer des documents à partir de l'heure et du nom des utilisateurs (il devrait y avoir 1 document par utilisateur)

Answer 1

Méthode addDoc 应该使用集合引用而不是文档引用。只有在想要指定文档名称时才会使用文档引用，此时应使用 setDoc, veuillez vous référer à l'exemple de code ci-dessous :

const setScore= async(timeprop, userprop)=>{
        console.log(time, user)
        await setDoc(doc(db, "Leaderboard", "<document-name>"), {
        name: userprop,
        time: timeprop,
      })
    }

Pour corriger ce problème, consultez l'exemple de code ci-dessous :

const setScore= async(timeprop, userprop)=>{
        console.log(time, user)
        await addDoc(collection(db, "Leaderboard"), {
        name: userprop,
        time: timeprop,
      })
    }

Vous pouvez consulter cette Documentation pour plus d'informations.