【Next.js】Cloud Firestoreから取得したデータを描画したい。

Question

前提・実現したいこと

Cloud Firestoreからデータ取得はできています。
取得したデータはObject型で描画できない為、配列に格納して描画しようと思っています。
下記のエラーが何を修正すれば良いかわかっていません。
お力添えをお願いいたします。

発生している問題・エラーメッセージ

TypeError: undefined is not an object (evaluating 'userInfo.name')

該当のソースコード

  async componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      this.setState({ user });
    });

    // Firestoreからユーザ情報を取得
    try {
      const db = firebase.firestore();
      const user = getCurrentUser();
      const userDoc = await db.collection("users").doc(user.uid).get()
      .then(snapshot => {
        let data = [];
        data.push(
          Object.assign({
            name: userDoc.name
          }, doc.data())
        )
        console.log(data);
        return data
      }).catch(error => {
        return []
      })
      return {datas: userDoc}

      this.setState({
        name: userDoc?.data?.name || '',
        profileImageUrl: userDoc?.data?.image || '',
      });
    } catch (error) {
      console.error(error);
    }
  }

// 省略

  render() {
    const userInfo = this.props.datas;
    return (
<div className="edit-item">
  <label className="edit-title s-text">ユーザー名</label>
   <input
    className="input-inner edit-input-inner"
    autocomplete="username"
    type="text"
    defaultValue={userInfo.name}
   />
</div>

Answer 1

onAuthStateChangedが非同期なので認証終わってsetStateされるまでに初回のrenderが走っているんではないかと思います。

Comments

[ug_o]

ご回答ありがとうございます。
認証部分をawaitして試しましたが、同じエラーが出てしまいます。

[yy_tn]

すみません、reactのライフサイクルでcomponentDidMountの前にそもそもまず初回のrenderが呼ばれますね。

[yy_tn]

reactのバージョンが16.2以下なら、componentWillMountで行うとrenderの前に処理が行えます。

[ug_o]

reactのバージョンは16.3だったので、componentWillMountではダメそうですね。
認証部分をconstructor() で state に代入してみたのですが、同じエラーを吐きます。