React Firestore如何在加载时获取文档字段

Question

我是 Firestore 的新手，我试图在页面加载时在文档字段中获取displayname的值，以便我可以将值作为defualtValue值放在TextField中。

import React from 'react'
import { useState, useEffect } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { db } from '../firebase'
import { getDoc, doc} from "firebase/firestore"; 
import { TextField } from '@mui/material';

导出默认 function EditUser() {

const { currentUser } = useAuth();

const [userData, setUserData] = useState([]);

useEffect(() =>{
    const getUsers = async()=>{
        const documentId = currentUser.uid
        const docRef =  await doc(db, "user", documentId)
        const usersCollectionRef = await getDoc(docRef)
    
        setUserData(usersCollectionRef.get("user_fields"))
        console.log(userData)
    }
    
    getUsers()
}, []);

return (
    
    <form>
        <TextField defaultValue={userData.displayname}></TextField>
    </form>
        
)

}

但在加载时console.log(userData.displayname)显示undefined或空array

编辑：我尝试通过将其添加到onClick中来使其成为一个事件来调试它总是第一次当我单击它时数据不显示 2-3 次它显示数据（不确定这是否有帮助）

控制台日志

Answer 1

您链接的 Firebase 文档具有集合“user_field s ”而不是“user_field”。 所以如果你改变

setUserData(usersCollectionRef.get("user_field"))

至

setUserData(usersCollectionRef.get("user_fields"))

那应该可以解决问题