当你想要.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>
)