Reactjs 将Typescript与React一起使用时，对象的类型为未知错误

我正在尝试使用typescript和Firebase创建一个带有React的聊天室。这是我的房间和消息组件代码：

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

  const [messages] = useCollectionData(query, { idField: 'id' });
  console.log(messages);
  return (
    <>
      {messages &&
        messages.map(msg => <ChatMessage key={msg.id} message={msg} />)}
    </>
  );
}

function ChatMessage(props: any) {
  const { text, uid, photoURL } = props.message;

  return (
    <>
      <p>{text}</p>
    </>
  );
}

但是我无法理解如何在map函数中为

msg

指定此接口。 我试过：

---

{messages&&messages.map（msg:Message=>）}

但那也不管用。我是打字和反应新手，任何帮助都将不胜感激。非常感谢。

使用您的界面和地图功能

messages.map(msg => key = {(msg as ChatMessage).id} message = {msg})

---

{messages&&messages.map（（msg:Message）=>）}

给出此错误：

类型为“（msg:Message）=>JSX.Element”的参数不能分配给类型为“（值：未知，索引：编号，数组：未知[]）=>Element”的参数。参数“msg”和“value”的类型不兼容。类型“未知”不可分配给类型“消息”。

消息的值是什么？？消息数组的控制台日志提供此

数组（3）0:createdAt:t{秒：1603996200，纳秒：0}id:“llyqgwdbmnqagqdjfwg”文本：“Nope:（“u proto_uu:Object 1:{文本：“plss”，createdAt:t，id:“getenzx09hlpuz4srr”}2:{text:“newwwww”，createdAt:t，id:“WfLWpeU4dXTYCt0zdVEN”}长度：3_uuuproto_uuu:Array（0）

messages.map(msg => key = {(msg as ChatMessage).id} message = {msg})