Javascript 如何从firebase向react组件添加数据

我正试图从后端（firebase）请求一些数据，然后将其置于状态。我认为我的问题是代码在请求完成之前执行。页面加载后，状态不是null，而是空对象

更新：fetchAllPost返回一个承诺。在谷歌上快速搜索了一下承诺，并使之生效

fetchAllPost().then((res) =>
      this.setState({
        posts: res,
      })
    );

home.component.jsx

export class home extends Component {
  state = {
    posts: null,
  };
  componentDidMount() {
    const posts = fetchAllPost();
    this.setState({ posts: posts });
    console.log(posts);
  }
  render() {
    return (
    ...

firebase.utils.js

export const fetchAllPost = async () => {
  var postRef = firestore.collection("posts");

  var snapshot = await postRef.get();

  var posts = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));
  return posts;
};