这个问题通常出现在使用firebase / firestore API进行数据获取的情况下。root cause在于初次加载进入页面时，服务端渲染 (SSR) 使我们的getInitialProps在服务端被调用从而导致我们的异步代码不会执行。因此我们需要在客户端的componentDidMount周期内进行，判断当前页面是在客户端还是服务端，并进行处理在客户端初次渲染时再次拉取数据，而不是仅限服务端。

例如：

import { firebase } from "../lib/firebase";

function HomePage(props) { return (

HomePage.getInitialProps = async ({ req }) => { // 如果在服务端，请等待数据完成加载 if (req) { // Create a reference to the cities collection const citiesRef = firebase.firestore.collection('cities'); const snapshot = await citiesRef.get(); const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data })); return { cities: data }; }

return { cities: [] }; };

class HomePageContainer extends React.Component { state = { cities: this.props.cities };

async componentDidMount() { // 如果在客户端，并且没有数据，请等待数据完成加载 if (!this.state.cities.length) { // Create a reference to the cities collection const citiesRef = firebase.firestore.collection('cities'); const snapshot = await citiesRef.get(); const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data })); this.setState({ cities: data }); } }

render() { return ; } }

export default HomePageContainer;