Firebase v9+React认证报错：无法读取undefined的name属性及存储问题

我在实现Firebase用户认证功能时，采用了Firebase v9语法，目前遇到控制台报错的问题，同时发现snapshot.exists()返回false，另外负责存储用户数据的SignUp组件无法将信息存入Firestore，也无法正确关联用户凭证。

相关代码 #

App.jsx代码 #

export class App extends Component {
  state = {
    user: null,
  }

  componentDidMount() {
    // 获取用户信息用于导航栏
    auth.onAuthStateChanged(async user => {
      console.log(user)
      if(user){
        const userid = user.uid;
        const userRef = await collection(db,'SignedUpUsersData')
        const docRef = doc(userRef, userid)
        await getDoc(docRef).then(snapshot => {
          console.log(snapshot.exists())   // -> false
          this.setState({
            user: snapshot.data().Name
          });
        })
      } else {
        this.setState({
          user: null
        })
      }
    })
  }

  render(){
    return (
      <>
       <ProductsContextProvider>
      <Router>
        <Routes>
        <Route path='/' element= {<Home user={this.state.user} />} /> 

Home.jsx代码 #

export const Home = ({user}) => {
    return(
        <>
        <Navbar user={user} />
        <HeroSection />
        <Cards />
        </>
    );
}

export default Home;

SignUp组件的signup()函数代码 #

const signup = (e) => {
 let history = useNavigate();
 e.preventDefault();
createUserWithEmailAndPassword(auth, email, password).then(async (userCredential) => {
    const user = userCredential.user;
   const docRef=  await setDoc(doc(db, 'SignedUpUsersData', userCredential.user.uid),{
             Name: name,
             Email: email,
             Password: password
         }).then(() => {
             setName('');
             setEmail('');
             setPassword('');
             setError('');
             history.push({ pathname: '/login'});
             document.getElementById('file').value = '';
         }).catch(err => setError(err.message));
     }).catch(err => setError(err.message)); 
 }

已尝试的无效方法 #

var ref = firebase.database().ref("SignedInUsersData");
docRef.once("value").then(function(snapshot){
  var key = snapshot.key;
  console.log(key)

疑问 #

snapshot.exists()返回false是否是问题的根源？如何解决Firestore数据无法上传以及用户信息无法读取的问题？

内容的提问来源于stack exchange，提问作者carlossrush