请有人帮忙。我已梳理了所有文档，检查了所有类似的问题，但真的找不到我遗漏的内容。

我是 React 的新手，正在尝试映射从 Firebase 数据库的异步调用返回的文档。

这是代码：

class Posts extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
    };
}
componentDidMount() {
    let posts = [];
    db.collection("Posts").get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            posts.push({
                data: doc.data(),
                id: doc.id
            });
        });
    });
    this.setState({
        data: posts
    });
}
renderPosts() {
    console.log(this.state.data);
    return this.state.data.map((post, index) => {
        console.log(post);
        console.log(index);
        return (
            <div>
                {index}
            </div>
        )
    })
}
render() {
    return(
        <div>
            {this.renderPosts()}
        </div>
    );
}
}

我确信这是一件非常简单的事情，但我正在抓狂。如果我检查我的状态，我可以看到数据。console.log(this.state.data); 里面的 renderPosts 甚至准确显示了我需要映射的内容，但 map 回调中的所有内容都没有返回，我最终得到一个空的。任何帮助都将不胜感激。