未捕获（承诺）FirebaseError：无效文档引用答案

【问题标题】：Uncaught (in promise) FirebaseError: Invalid document reference未捕获（承诺）FirebaseError：无效文档引用
【发布时间】：2023-01-28 05:54:47
【问题描述】：

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

所以我有这个残局组件，当它由于某些原因呈现时，setScore 函数被调用，我认为这就是为什么我得到这个错误的原因：

未捕获（承诺）FirebaseError：无效文档引用。文档引用必须有偶数个段，但排行榜有 1 个。

在第 27 行。我认为这是因为在渲染时调用了 setScore 是不是错了？如果不是，问题/解决方案是什么？

在 firebase 中，我有一个 Leaderboard 集合，我想根据用户时间和姓名创建文档，（每个用户应该有 1 个文档）

【问题讨论】：

标签： reactjs firebase google-cloud-firestore jsx leaderboard

【解决方案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,
      })
    }

您可能想查看此 documentation 以获取更多信息。

【讨论】：