Nicht erfasster Firebase-Fehler in Promise: Ungültige Dokumentreferenz

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

Ich habe also diese Endgame-Komponente und wenn sie gerendert wird, wird aus irgendeinem Grund die setScore-Funktion aufgerufen und ich glaube, deshalb erhalte ich die folgende Fehlermeldung:

Unabgefangener (versprochener) FirebaseError: Ungültige Dokumentreferenz. Dokumentverweise müssen eine gerade Anzahl von Segmenten haben, Bestenlisten haben jedoch 1.

Online 27. Liege ich falsch, wenn ich denke, dass es daran liegt, dass setScore beim Rendern aufgerufen wird? Wenn nicht, was ist das Problem/die Lösung?

In Firebase habe ich eine Bestenliste-Sammlung und möchte Dokumente aus der Zeit und dem Namen der Benutzer erstellen (es sollte 1 Dokument pro Benutzer geben)

Answer 1

方法 addDoc 应该使用集合引用而不是文档引用。只有在想要指定文档名称时才会使用文档引用，此时应使用 setDoc，请参考下面的示例代码：

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

要更正此问题，请查看下面的示例代码：

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

您可以查看此文档获取更多信息。