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
所以我有這個(gè)endgame組件,當(dāng)它渲染時(shí),由于某些原因,setScore函數(shù)被調(diào)用,我認(rèn)為這就是我得到以下錯(cuò)誤的原因:
未捕獲(承諾中)FirebaseError:無效的文檔引用。文檔引用必須有偶數(shù)個(gè)段,但排行榜有 1 個(gè)。
在第27行。我是不是錯(cuò)了,認(rèn)為是因?yàn)閟etScore在渲染時(shí)被調(diào)用?如果不是,問題/解決方案是什么?
在firebase中,我有一個(gè)Leaderboard集合,我希望從用戶的時(shí)間和姓名創(chuàng)建文檔(每個(gè)用戶應(yīng)該有1個(gè)文檔)
方法 addDoc
應(yīng)該使用集合引用而不是文檔引用。只有在想要指定文檔名稱時(shí)才會(huì)使用文檔引用,此時(shí)應(yīng)使用 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, }) }
您可以查看此文檔獲取更多信息。