【Next.js】Firestoreから取得したデータの表示方法を知りたい。

Question

前提・実現したいこと

下記の質問でObject型で取得したデータを配列に格納して表示させようと試みましたが、ヒントをいただけましたが、私の力不足で解決できずでした。
https://teratail.com/questions/288616

もう少し別のやり方があるのではないかと思い、質問させていただきました。
どうぞ、お力をお貸しいただけると嬉しいです。

現状

Console上では下記の通り取得できています。

{thumgnailMediumImageUrl: "https://graph.facebook.com/******/picture", originalImageUrl: "https://graph.facebook.com/******/picture", update_at: t, name: "テスト", created_at: t}
created_at: t {seconds: 1599027906, nanoseconds: 344000000}
name: "テスト"
originalImageUrl: "https://graph.facebook.com/******/picture"
thumgnailMediumImageUrl: "https://graph.facebook.com/******/picture"
update_at: t {seconds: 1599027906, nanoseconds: 344000000}
__proto__: Object

該当のソースコード

export class Edit extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      user: null,
      name: "",
      profileImageUrl: "",
    };
    firebase.auth().onAuthStateChanged((user) => {
      this.setState({ user });
    });
  }


  async componentDidMount() {
    // Firestoreからユーザ情報を取得
    try {
      const db = firebase.firestore();
      const user = getCurrentUser();
      const userDoc = await db.collection("users").doc(user.uid).get();
      console.log(userDoc.data());
      this.setState({
        name: userDoc?.data?.name || '',
        profileImageUrl: userDoc?.data?.image || '',
      });
    } catch (error) {
      console.error(error);
    }
  }

// 省略

  render() {
    return (

  <div className="edit-item">
      <label className="edit-title s-text">ユーザー名</label>
      <input
       className="input-inner edit-input-inner"
       autocomplete="username"
       type="text"
       defaultValue={ここに{name}を表示させたい}
       />
　</div>

Answer 1

こんな感じでどうでしょうか? 自分もあまり詳しく無いので、最善では無いかもしれませんが。

export default class Edit extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      user: null,
      name: '',
      profileImageUrl: '',
    };
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(async (user) => {
      if (user) {
        const doc = await firebase
          .firestore()
          .collection('users')
          .doc(user.uid)
          .get();

        const data = doc.data();
        if (data) {
          this.setState({
            user,
            name: data.name,
            profileImageUrl: data.image,
          });
        }
      }
    });
  }

  render() {
    return (
      <div className='edit-item'>
        <label className='edit-title s-text'>ユーザー名</label>
        <input
          className='input-inner edit-input-inner'
          autoComplete='username'
          type='text'
          defaultValue={this.state.name}
        />
      </div>
    );
  }
}

Comments

[ug_o]

返答が遅くなり申し訳ありません。
いただいたコードを試したところ無事にできました！
この度はありがとうございました。