當你想要.map數據時，如何用UseState和Firebase快照定義類型？

Question

相關代碼：

const [posts, setPosts] = useState([]);

 useEffect(
    () =>
      onSnapshot(
        query(collection(db, "posts"), orderBy("timestamp", "desc")),
        (snapshot) => {
          setPosts(snapshot.docs);
        }
      ),
    [db]
  );

 return (
 <div>
   {posts.map((post) => (
      <Post key={post.id} id={post.id} post={post.data()} />
    ))}
 </div>
)

上面的代碼在本地運行良好，但對於部署來說，似乎 UseState 是 [] 或 undefined 或 null with.map 拋出錯誤。

到目前為止我遇到的錯誤：

1：類型“QueryDocumentSnapshot[]”不可分配給類型“never[]”。

所以我嘗試改變 UseState 和快照，然后我們得到錯誤 2

2：類型錯誤：參數“post”隱式具有“any”類型。

然后，我嘗試使用 String[] 但這也不起作用

然后，我嘗試向上移動.map (snapshot.docs.map) 得到錯誤 3

3：類型錯誤：無法讀取 null 的屬性（讀取“地圖”）

任何幫助將不勝感激！

Answer 1

首先，您可以為您的Post文檔創建一個界面。 例如，

interface IPost {
  id: string
  title: string
  // other fields
}

然后你可以將它與useState一起使用來定義類型：

const [posts, setPosts] = useState<IPost>([]);

此外，您可以將數據本身設置為 state 而不是QueryDocumentSnapshot數組：

setPosts(snapshot.docs.map((d) => ({ id: d.id, ...d.data() })) as IPost[])

return (
 <div>
   {posts.map((post) => (
      <Post key={post.id} id={post.id} post={post} />
    ))}
 </div>
)