我正在创建一个欢迎类型的项目，任何用户都可以使用 react 来迎接那个人

所以我面临的问题是它说：

TypeError: Cannot read property 'uid' of null

但在 firebase 中 uid 是可见的。我已经在控制台上打印了传入的数据，并且 uid 也是可见的，但是在显示内容时整个 UI 崩溃了。

错误是：

  133 | const { username,usermessage,uid,photoURL,usernameByID} = props.messageIN;
  134 | const {isbdaygirl} = props.isBdaygirl;
  135 | console.log(props)
> 136 | const messageType = uid === auth.currentUser.uid ? 'itsmine' : 'others';
      | ^  137 | if(isbdaygirl){
  138 |   return(
  139 |     <div>

我写的代码：

function WishForher(){
  // More Code is there here...
  const sendToDB = async(e) =>{
    e.preventDefault();
    const {uid,photoURL,displayName} = auth.currentUser;
    await msgRef.add({
      username:Username,
      usermessage:wishIN,
      usernameByID:displayName,
      uid,
      createdAt:firebase.firestore.FieldValue.serverTimestamp(),
      photoURL
    })
    console.log(`Your send Data is : \nUserName:${Username}\nUserMessage:${wishIN}`)
    setUsername('');
    setwishIN('');
  }
  const removeAcc = (e) =>{
    auth.signOut()
  }
  return(
    <div>
      <button onClick={()=>setPaswdIn(!paswdIn)}>I am Spoorthi</button>
      {paswdIn && 
        <form onSubmit={isShe}>
          <p>Enter secreat code</p>
          <input 
            type="text" 
            placeholder="Enter..."
            value={enterpaswd}
            onChange={(e)=>{setEnterpaswd(e.target.value)}}/>
          <button type="submit">I Clame</button>
        </form>
      }
      {bdaygirl? <p>Happy Birthday</p>:null}
      {
        messages && messages.map(msg => <Message key={msg.id} messageIN={msg} isBdaygirl={bdaygirl}/>)
      }
      <h2>Wishes</h2>
      <button onClick={wisher}>I wish you ...</button>
      {user && 
        <div>
          <form onSubmit={sendToDB}>
            <p>Your name</p>
            <input 
              type="text" 
              placeholder="Spoorthi recognize you by..."
              value={Username}
              onChange={(e)=>{setUsername(e.target.value)}}/>
            <p>Your name</p>
            <textarea
              type="text" 
              placeholder="I wish you a happy birthday spoorthi..."
              value={wishIN}
              onChange={(e)=>{setwishIN(e.target.value)}}/>
            <button type="submit">Send My Wish</button>
          </form>
        </div>
      }
      <button onClick={removeAcc}>Remove Account</button>
    </div>
  )
}

function Message(props){

  const { username,usermessage,uid,photoURL,usernameByID} = props.messageIN;
  const {isbdaygirl} = props.isBdaygirl;
  console.log(props)
  const messageType = uid === auth.currentUser.uid ? 'itsmine' : 'others';
  if(isbdaygirl){
    return(
      <div>
        <img src={photoURL} alt="ProfilePic"/>
        <h1>{username?username:usernameByID}</h1>
        <p>{usermessage}</p>
      </div>
    )
  }
  else{
    if(messageType==='itsmine'){
      return(
        <div>
          <img src={photoURL} alt="ProfilePic"/>
          <h1>{username?username:usernameByID}</h1>
          <p>{usermessage}</p>
        </div>
      )
    }
    else{
      return(
        <div>
          <img src={photoURL} alt="ProfilePic"/>
          <h1>{username?username:usernameByID}</h1>
          <p>It can be only read by birthday girl for privacy issue</p>
        </div>
      )
    }
  }
}