title: Object is of type unknown error when using Typescript with React
body: <p>I am trying to create a chatbox with React using typescript and Firebase. This is my code for the Room and Message component:</p>
  <pre><code>function ChatRoom() {
    const messagesRef = firestore.collection('messages');
    const query = messagesRef.orderBy('createdAt').limit(25);
  
    const [messages] = useCollectionData(query, { idField: 'id' });
    console.log(messages);
    return (
      &lt;&gt;
        {messages &amp;&amp;
          messages.map(msg =&gt; &lt;ChatMessage key={msg.id} message={msg} /&gt;)}
      &lt;/&gt;
    );
  }
  
  function ChatMessage(props: any) {
    const { text, uid, photoURL } = props.message;
  
    return (
      &lt;&gt;
        &lt;p&gt;{text}&lt;/p&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>when I specify <code>key={msg.id}</code> it says that <code>Object is of type 'unknown'.  TS2571</code>. I tried to create an interface for the Mesaage which is:</p>
  <pre><code>interface Message {
    id: string;
    text: string;
    createdAt: { nanoseconds: number; seconds: number };
  }
  </code></pre>
  <p>But I'm not able to understand how do I specify this Interface to the <code>msg</code> in the map function.
  I tried:
  <code>{messages &amp;&amp; messages.map(msg: Message =&gt; &lt;ChatMessage key={msg.id} message={msg} /&gt;)}</code>
  but that didn't work too. I am new to TypeScript and React and any help would be appreciated. Much thanks.</p>