React, TypeScriptでfirestoreからデータを取得したいが型まわりでエラーが出る

Question

前提

React, TypeScriptでfirestoreからデータを取得したいのですが、以下のようなエラーが発生しました。

実現したいこと

• firestoreからpostsデータを取得し、map関数でpostを展開

発生している問題・エラーメッセージ

エラーメッセージ
(parameter) querySnapshot: QuerySnapshot<DocumentData>
----------------------------------------------------------------------------
型 'DocumentData[]' の引数を型 'SetStateAction<Posts>' のパラメーターに割り当てることはできません。
  型 'DocumentData[]' を型 'Posts' に割り当てることはできません。
    型 'DocumentData' には 型 '{ displayName: string; userName: string; text: string; image: string; }' からの次のプロパティがありません: displayName, userName, text, image

該当のソースコード

import { Box, Heading } from "@chakra-ui/react";
import Post from "./PostOne";
import TweetBox from "./TweetBox";
import { collection, getDocs } from "firebase/firestore";
import db from "../../firebase";
import { useState } from "react";

type Posts = {
  displayName: string;
  userName: string;
  text: string;
  image: string;
}[];

const TimeLine = () => {
  const [posts, setPosts] = useState<Posts>([]);
  const postsColRef = collection(db, "posts");
  getDocs(postsColRef).then((querySnapshot) => {
    setPosts(querySnapshot.docs.map((doc) => doc.data()));
  });

  return (
    <Box
      overflowY="scroll"
      flex="0.45"
      borderRight="1px solid #efeff2"
      css={{ "&::-webkit-scrollbar": { display: "none" } }}
    >
      <Box
        background="white"
        border="1px solid #efeff2"
        p="15px 20px"
        top="0"
        textAlign="left"
        position="sticky"
      >
        <Heading fontSize="20px" as="h2" fontWeight="bold">
          ホーム
        </Heading>
      </Box>
      <TweetBox />

      {posts.map((post) => (
        <Post
          displayName={post.displayName}
          userName={post.userName}
          text={post.text}
          image={post.image}
        />
      ))}
    </Box>
  );
};

export default TimeLine;

Answer 1

Firestoreから取得した値をそのまま格納するのではなく、例えば以下のように展開すればいけそうでしょうか？

setPosts(querySnapshot.docs.map((doc) => {
 return {
   displayName: doc.data().displayName,
   userName: doc.data().userName,
   text: doc.data().text,
   image: doc.data().image,
 }
));