Reactjs 属性不存在于React with TypeScript中的类型上

我正在创建聊天室，对于发送消息功能，我有以下代码：

function ChatRoom() {
  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(25);

  const [messages] = useCollectionData(query, { idField: 'id' });
  const [formValue, setFormValue] = useState('');
  const sendMessage = async (e: any) => {
    e.preventDefault();

    const { uid, photoURL } = auth.currentUser;

    await messagesRef.add({
      text: formValue,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      uid,
      photoURL,
    });

    setFormValue('');
  };
  console.log(messages);
  console.log(auth.currentUser);
  return (
    <>
      <div>
        {messages &&
          messages.map(msg => (
            <ChatMessage key={(msg as Message).id} message={msg} />
          ))}
      </div>
      <form onSubmit={sendMessage}>
        <input
          value={formValue}
          onChange={e => setFormValue(e.target.value)}
          placeholder='say something nice'
        />

        <button type='submit' disabled={!formValue}>
          

Here I am getting the error: Property 'uid' does not exist on type 'User | null'. and Property 'photoURL' does not exist on type 'User | null'. Now I get that I have to define an interface and do this.


You are thinking that you need to define an interface because your component doesn't know the type of 
auth.currentUser
.  But that is not how that error message reads to me.  Typescript believes that the type of 
auth.currentUser
 is 
User | null
.  So there is already a 
User
 type or interface, which presumably has a whole bunch of properties and probably already defines 
uid
 and 
photoURL
.  That's not the issue.  The issue is the 
| null
 part.  
auth.currentUser
 is either a 
User
 object representing the current user, or it's 
null.  You can't destructure it until you know that it's an object and not 
null
.  That is what the error is saying.

So we need to check the value and make sure that we don't have 
null
:

const sendMessage = async (e: any) => {
  e.preventDefault();

  const user = auth.currentUser;

  if (user) {
    const { uid, photoURL } = user;

    await messagesRef.add({
      text: formValue,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      uid,
      photoURL,
    });

    setFormValue('');
    
  } else {
    // can handle error somehow
  }
};

功能聊天室（）{
const messagesRef=firestore.collection（'messages'）；
const query=messagesRef.orderBy（'createdAt'）.limit（25）；
const[messages]=useCollectionData（查询，{idField:'id'}）；
常量[formValue，setFormValue]=useState（“”）；
const sendMessage=async（e:any）=>{
e、 预防默认值（）；
const{uid，photoURL}=auth.currentUser；
等待消息ref.add({
text:formValue，
createdAt:firebase.firestore.FieldValue.serverTimestamp（），
uid，
photoURL，
});
setFormValue（“”）；
};
控制台日志（消息）；
console.log（auth.currentUser）；
返回(
{消息&&
messages.map（msg=>(
))}
setFormValue（e.target.value）}
占位符=“说点好话”
/>
这里我得到了一个错误：属性“uid”在类型“User | null”上不存在。属性“photoURL”在类型“User | null”上不存在。现在我知道我必须定义一个接口并执行此操作

您认为您需要定义一个接口，因为您的组件不知道
auth.currentUser
的类型。但我不知道错误消息是如何读取的。Typescript认为
auth.currentUser
的类型是
User | null
。因此已经有了
User
类型或接口，而ch大概有一大堆属性，并且可能已经定义了
uid
和
photoURL
。这不是问题所在。问题在于
|null
部分。
auth.currentUser
是表示当前用户的
用户对象，或者是
null.Yo只有知道它是一个对象而不是
null
，才能对其进行分解。这就是错误的意思

因此，我们需要检查该值并确保没有
null
：

这里我得到了一个错误：属性“uid”在类型“User | null”上不存在。属性“photoURL”在类型“User | null”上不存在。现在我知道我必须定义一个接口并执行此操作

您认为您需要定义一个接口，因为您的组件不知道
auth.currentUser
的类型。但我不知道错误消息是如何读取的。Typescript认为
auth.currentUser
的类型是
User | null
。因此已经有了
User
类型或接口，而ch大概有一大堆属性，并且可能已经定义了
uid
和
photoURL
。这不是问题所在。问题在于
|null
部分。
auth.currentUser
是表示当前用户的
用户对象，或者是
null.Yo只有知道它是一个对象而不是
null
，才能对其进行分解。这就是错误的意思

因此，我们需要检查该值并确保没有
null
：

嘿，谢谢你的精彩解释！你能告诉我，如果我确实需要制作用户界面，但不想定义所有属性，而只是
uid
和
photoURL
？非常感谢：）
const{uid，photoURL}=user as{uid:string；photoURL:string}
看遍所有地方后，这个解释才是最好的！嘿，谢谢你的精彩解释！您还可以告诉我，如果我必须创建用户界面，但不想定义所有属性，而只是
uid
和
photoURL
，您会怎么做？非常感谢：）
const{uid，photoURL}=user as{uid:string；photoURL:string}
看遍所有地方后，这个解释就是最好的！