常連

### 前提・実現したいこと

デモを用意しました。
[CodeSandBox](https://codesandbox.io/s/competent-waterfall-23zk8?fontsize=14&hidenavigation=1&theme=dark)

2つのプロパティを持ったオブジェクトを格納した配列に、```forEach```で各オブジェクトに処理を施し、処理を施したオブジェクトを配列の```state```に格納したいです。

デモで言うと、下記のような表示を目指しています。
> HOGE
hogehoge
FUGA
fugafuga

新しい配列を生成する場合は```map```を使う方が相応しいと思いますが、実際のデータの取得元が```Firestore```からであり、```Firestore```から取得したデータは```map```メソッドが使えないようなので、```forEach```で実装したいです。

### 発生している問題・試したこと

処理を施したオブジェクトは配列に追加されず上書きをします。

[【React】 useStateで配列を保存するときの注意点 - Qiita](https://qiita.com/naogify/items/cef4330858d0c677e71b)
上記ページを参考にして、```setState([...配列のstate, 処理を施したオブジェクト])```と書いてみましたが、配列の```state```の中身は最後に処理を施したオブジェクト1つのみでした。

現状のデモは```hoge```オブジェクトが```fuga```オブジェクトに上書きされ、下記のように```fuga```オブジェクトのみが表示されています。
> FUGA
fugafuga

### 該当のソースコード

```javascript
const data1 = {
  title: "hoge",
  text: "hogehoge"
};
const data2 = {
  title: "fuga",
  text: "fugafuga"
};
const listData = [data1, data2];

export default function App() {
  const [array, setArray] = useState([]);
  useEffect(() => {
    listData.forEach((data) => {
      const upperTitle = data.title.toUpperCase();
      const newData = { title: upperTitle, text: data.text };
      setArray([...array, newData]);
    });
  }, []);

  const list = array.map((item, index) => (
    <div key={index}>
      <p>{item.title}</p>
      <p>{item.text}</p>
    </div>
  ));

  return <>{list}</>;
}
```

useStateで配列にオブジェクトを追加したいです。

お世話になっています。

Cloud Firestoreでデータを管理しているのですが、
日付データの比較がうまくできないのでご相談させてください。


**hoge**というコレクションの中に、
**createdAt**というfirestore.Timestamp型のフィールドをもつドキュメントが
複数存在する構造です。

でこの保管されているデータから今日作成された物だけを抽出したく、
```JS
const start = new Date(new Date().setHours(0, 0, 0, 0));
const now = new Date();

const todayData = db
  .collection('hoge')
  .where('createdAt', '>', `${start}`)
  .where('createdAt', '<', `${now}`);
```
のようなコードを打てばうまく動作してくれると期待したのですが、
空の配列しか返ってきませんでした。


where句を無くして取得したデータの**createdAt**の中身をみたところ、
```ここに言語を入力
createdAt: {
 nanoseconds: 813000000
 seconds: 1592897021
}
```
のようにデータが入っていたので、>とかの形じゃ比較できないのかなとか思いつつ、
けどどうすればか分からずという状態です。

一旦全データを取得してjs側で処理してしまうことはできるんですけど、
where句とかの形で対応できるならそっちで完結させてしまいたいと思っています。

よろしくお願いします。

【firestore】where句でTimestampの日付比較ができない

### 実現したいこと

- Xcodeにおけるエラーの解消

### 前提
下記を利用して開発しています。
- Xxode14.3
- CloudFirestore
- Cocoapods

### 発生している問題
Xcodeを14.3にアップデートした後にシミュレーターにビルドしたところ、下記エラーが発生して対処できずにいます。
アップデート前からコードは変えていない状態で発生しました。


- エラーが発生しているファイル
```
Firebase.h
```
- エラーメッセージ
```
'FirebaseCore/FirebaseCore.h' file not found
```

### 試したこと

- Xcode14.2、14.1をダウンロードしプロジェクトを開く（それ以前のバージョンはOSが非対応のため未実施）
- キャッシュ情報の削除
　[こちら](https://qiita.com/shtnkgm/items/c96a58579ec406194fa8)に記載のコマンドを実行しました
- PROJECT > build setting > Architectures > ExcludedArchitectures に arm64 を追加
　[こちら](https://nsdev.jp/apple/ios/14581.html)を参照しました

開発初心者のため、上記のようなネット上の情報を試す以外の手立てに至れずにおります。
解消方法やデバッグに関するアドバイスなどいただけますと幸いです。


'FirebaseCore/FirebaseCore.h' file not found エラーの解消

#vue-js-modalにて画面サイズに応じて横幅・縦幅を調整したい

[Vue.jsで簡単にモーダルが実装できる「vue-js-modal」
](https://www.kabanoki.net/3144/)を参考に実装しております。

モーダル内の自身でclassを付けたものはもちろんCSSは適用されるので変更できますが、
vue-js-modalにて用意されたclassはスコープ内でCSSが適用されない為、
どのようにして画面サイズに応じてスタイルを変更させたらいいのか分からない状況です。

```ここに言語を入力
<modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="550">
```

上記のようにライブラリにて用意されているmodalというコンポーネントに対して
:width="750" :height="550"とサイズを指定してあげる仕組みとなってます。

この場合、画面サイズに応じてサイズを変更させる為には、どのようにしてあげたら良いのでしょうか・・

画面サイズに応じたサイズを新たに作ってあげないといけないのでしょうか。

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#post.vue
```ここに言語を入力
<template>
  <div class="post-content">
    <button @click="
        show();
        openModal();
      " class="post-comment flex">
      <img class="comment-icon" src="../assets/コメント.jpg" alt="コメント" />
    </button>
    <modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="550">
      <div
        data-modal="post"
        aria-expanded="true"
        class="vm--overlay"
        styles="background: rgba(255, 255, 255, 0.1);"
      >
        <div class="vm--top-right-slot"></div>
      </div>
      <div class="modal-header flex">
        <h2 class="post-title flex">Cinemaryを投稿する</h2>
        <hr class="separate" />
      </div>
      <div class="modal-body">
        <div class="post-items flex">
          <div class="post-contens flex">
            <input type="text" class="post-item" maxlength="50" placeholder="タイトル" v-model="title" />
          </div>
          <div class="post-contens flex">
            <textarea-autosize
              name="text"
              rows="1"
              v-model="description"
              placeholder="内容"
              maxlength="50"
              :min-height="70"
              :max-height="70"
            ></textarea-autosize>
          </div>
          <div class="post-contens flex">
            <select
              v-model="genre"
              class="post-select"
              :style="{ color: genre == '' ? 'gray' : 'white' }"
            >
              <option class="post-item" value hidden>ジャンルを選択</option>
              <option
                v-for="genre in genres"
                :value="genre.name"
                :key="genre.id"
                class="post-item"
                style="color: white;"
              >{{ genre.name }}</option>
            </select>
          </div>
          <button class="post-btn" @click.prevent="postItem">投稿</button>
          <button
            class="hide-btn flex"
            @click="
              hide();
              closeModal();
            "
          >×</button>
        </div>
      </div>
    </modal>
  </div>
</template>

```

【CSS】vue-js-modalにて画面サイズに応じて横幅・縦幅を調整したい

![イメージ説明](91a2546d8c9a06f48048ee67241cd506.png)

上記より２つエラーが出ている状況です。

#1つ目

```ここに言語を入力
[Vue warn]: Property or method "uid" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
```
こちらにつきましては、エラーコード内にあるURLを確認すると[反応性の宣言](https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties)と以下のように書かれておりました。

---
Vue はルート レベルのリアクティブ プロパティを動的に追加することを許可していないため、空の値であっても、すべてのルート レベルのリアクティブ データ プロパティを事前に宣言して、Vue インスタンスを初期化する必要があります。

---

その為、以下のようにdata()内にuid=""という風に初期化させました。

```ここに言語を入力
export default {
  components: { Nl2br },
  data() {
    return {
      user: {}, // ユーザー情報
      chat: [], // 取得したメッセージを入れる配列
      input: "", // 入力したメッセージ
      userIds: [],
      userDatas: [],
      uid: "",
      authenticatedUser: "",
      preview: require("../assets/デフォルト画像.jpg"),
    };
  },
```

#2つ目

```ここに言語を入力
[Vue warn]: Error in render: "TypeError: Cannot read property 'uid' of undefined"
```

---
レンダリングのエラー： "TypeError：未定義のプロパティ 'uid'を読み取れません"

---

１つ目のエラーはuid=""という風に初期化させることで解決しましたが、上記のようなレンダリングエラーが検出されております・・

原因が分からず行き詰まっております。

###試したこと

- [VuejsでTypeError: Cannot read property 'hoge' of undefined](https://qiita.com/ikemura23/items/f33dab559b78ae6c87f3)
- [【Vue.js】見た目は正常なのにエラーが出る](https://t-salad.com/vuejs-error/)

以上を参考に各テンプレート内でuidを使用している箇所で、v-if="uid"としてデータの取得がされないうちは表示しないようにしましたが、エラーは改善されませんでした。

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#chat.vue

```ここに言語を入力
<template>
  <div class="chat">
    <div class="chat-header flex">
      <h1 class="chat-tll flash neon flex">Chat Room</h1>
      <slide right disableOutsideClick width="200">
        <router-link to="/" class="header-link neon3 flash">HOME</router-link>
        <router-link to="/about" class="header-link neon3 flash"
          >ABOUT</router-link
        >
        <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash"
          >POST</router-link
        >
        <router-link
          to="/signup"
          class="header-link neon3 flash"
          v-if="!authenticatedUser"
          >SINGUP</router-link
        >
        <router-link
          to="/signin"
          class="header-link neon3 flash"
          v-if="!authenticatedUser"
          >SINGIN</router-link
        >
        <router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash"
          >MYPAGE</router-link
        >
      </slide>
      <div id="page-wrap"></div>
    </div>
    
    <transition-group name="chat" tag="div" class="list content">
      
      <section
        v-for="{ key, name, image, message, userid, time } in chat"
        :key="key"
      >
        <div v-if="userid === user.uid" class="myitem flex">
          
          

          
          <div class="mydetail">
            <div class="mytime">{{ $dayjs(time).format("HH:mm") }}</div>
            <div @click.right.prevent="deleteMessage(key)" class="mymessage">
              <nl2br tag="div" :text="message" />
            </div>
          </div>
          <div class="myimage flex">
            <img :src="user.photoURL" width="50" height="50" />
            <div class="myname flex">{{ user.displayName }}</div>
          </div>
        </div>
        <div v-else class="otheritem flex">
          
          
          <div class="otherimage flex">
            <router-link :to="`/mypage/${returnUserData(userid).uid}`">
              <img
                :src="
                  returnUserData(userid)
                    ? returnUserData(userid).uploadedImage.fileUrl
                    : preview
                "
                width="50"
                height="50"
              />
              <div class="othername flex">
                {{
                  returnUserData(userid)
                    ? returnUserData(userid).name
                    : "NO NAME"
                }}
              </div>
            </router-link>
          </div>
          
          <div class="otherdetail">
            <div class="othermessage">
              <nl2br tag="div" :text="message" />
            </div>
            <div class="othertime">{{ $dayjs(time).format("HH:mm") }}</div>
          </div>
        </div>
      </section>
    </transition-group>

    
    <div class="message-inner flex">
      <form action @submit.prevent="doSend" class="form flex">
        <textarea
          v-model="input"
          placeholder="メッセージを入力"
          :disabled="!user.uid"
          @keydown.enter.exact.prevent="doSend"
        ></textarea>
        
        <button type="submit" :disabled="!user.uid" class="send-button">
          <img src="../assets/電球.jpg" class="send-img" alt="送信" />
        </button>
      </form>
    </div>
  </div>
</template>
```

```
<script>
import firebase from "firebase";
import Nl2br from "vue-nl2br";
import Vue from "vue";
// 改行を <br> タグに変換するモジュール
import dayjs from "dayjs";
import { Slide } from "vue-burger-menu";
Vue.component("slide", Slide);

dayjs.locale("ja");
Vue.prototype.$dayjs = dayjs;

export default {
  components: { Nl2br },
  data() {
    return {
      user: {}, // ユーザー情報
      chat: [], // 取得したメッセージを入れる配列
      input: "", // 入力したメッセージ
      userIds: [],
      userDatas: [],
      uid: "",
      authenticatedUser: "",
      preview: require("../assets/デフォルト画像.jpg"),
    };
  },
  created() {
    firebase.auth().onAuthStateChanged((user) => {
      // ログイン状態ならuserが取得できる
      this.user = user ? user : {};
      //userにはログイン中のユーザー情報(Firebaseのデータ)が保存されている。
      const ref_message = firebase.database().ref(this.$route.params.id);

      if (user) {
        this.chat = [];
        //limitToLast(10)で並べ替えられた「ref_message」の最後の10個を取得し、on()で変更があったときのハンドラを登録。
        ref_message.limitToLast(10).on("child_added", this.childAdded);
      } else {
        //off()は、変更があったときのハンドラを解除
        ref_message.limitToLast(10).off("child_added", this.childAdded);
      }
    });
  },
  methods: {
    // スクロール位置を一番下に移動
    scrollBottom() {
      this.$nextTick(() => {
        //this.$nextTickは、再描画を待つ。絶対値からbody要素の高さを取得。
        window.scrollTo(0, document.body.clientHeight);
      });
    },
    childAdded(snap) {
      const message = JSON.parse(JSON.stringify(snap.val()));
      if (!this.userIds.includes(String(message.userid))) {
        this.userIds.push(String(message.userid));
        //this.userIds（配列）にuserid含まれていていなければthis.userIds（配列）に追加。

        let self = this;

        firebase
          .firestore()
          .collection("users")
          .doc(message.userid)
          .get()
          .then((snapshot) => {
            self.userDatas.push(snapshot.data());
          });
        //メッセージを送信したuserid(ログイン中のユーザーid)の情報をuserDatasに保存
      }
      //データベースに新しい要素が追加されると随時呼び出される
      this.chat.push({
        key: snap.key,
        name: message.name,
        image: message.image,
        message: message.message,
        userid: message.userid,
        time: message.time,
      });
      this.scrollBottom();
      //スクロールの一番下に追加。
    },
    doSend() {
      const time = time;
      if (this.user.uid && this.input.length) {
        //以下でFirebaseに書き込まれたメッセージを追加
        firebase
          .database()
          .ref(this.$route.params.id)
          .push(
            {
              message: this.input,
              name: this.user.displayName,
              image: this.user.photoURL,
              userid: this.user.uid,
              time: firebase.database.ServerValue.TIMESTAMP,
            },

            () => {
              this.input = ""; //フォームを空にする
            }
          );
      }
    },
    returnUserData(id) {
      const userData = this.userDatas.find((user) => user.uid === id);
      //methodsなので引数に渡した値(id)はtemplate内の引数(userid)を渡していること。
      //this.userDatas（配列）に入っている値uesr.uidとidが一致したものを一つuserData（配列）に保存。
      return userData;
    },
    deleteMessage(key) {
      firebase
        .database()
        .ref(this.$route.params.id + "/" + key)
        .remove();
      this.$swal({
        title: "内容確認",
        text: "メッセージを削除しますか？",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
        .then((willDelete) => {
          if (willDelete) {
            this.$swal("メッセージを削除しました", {
              icon: "success",
            });
            this.$router.go({
              path: `/chat/${this.$route.params.id}`,
              force: true,
            });
          } else {
            this.$swal("キャンセルしました。");
          }
        })
        .catch(() => {
          this.$swal("メッセージを削除出来ません。", {
            icon: "error",
          });
        });
    },
  },
  mounted() {
    //以下、ユーザーが認証済みであれば表示・非表示を設定
    firebase.auth().onAuthStateChanged((user) => {
      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;

      if (user) {
        this.authenticatedUser = true;
      } else {
        this.authenticatedUser = false;
      }
    });
  },
};
</script>
```

エラーコード： Error in render: "TypeError: Cannot read property 'uid' of undefined"を解消したい

#cloud functions謎のエラーの原因は？

```console
Error: Process exited with code 16
    at process.on.code (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:275:22)
    at process.emit (events.js:198:13)
    at process.EventEmitter.emit (domain.js:448:20)
    at process.exit (internal/process/per_thread.js:168:15)
    at Object.sendCrashResponse (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/logger.js:37:9)
    at process.on.err (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:271:22)
    at process.emit (events.js:198:13)
    at process.EventEmitter.emit (domain.js:448:20)
    at emitPromiseRejectionWarnings (internal/process/promises.js:140:18)
    at process._tickCallback (internal/process/next_tick.js:69:34) 
```

cloud functionsで`monthCountEvents`関数をデプロイすると、`monthCountEvents`が発動するたびにこのようなエラーが発生します。

![1](1ba1cbafe836296e3c4bb87de772ee03.jpeg)

**このエラーの原因は何でしょうか？**

#何を実現したいか？
[Firebase 要素の数をカウントするなら、最初からこの方法でいきましょう！（Cloud Functions）](https://qiita.com/kokogento/items/e4bc6eac6b8501ebcab7)
:point_up:上記の記事を参考に、Firestoreのドキュメントの数をカウントしています。

`users/{userId}/events/{eventId}`のドキュメントに変化があった場合、Firestore内のドキュメントフィールド２箇所にカウントを記録します。

```typescript
exports.monthCountEvents = functions.region('asia-northeast1').firestore
  .document('users/{userId}/events/{eventId}')
  .onWrite((change, context) => {
```



#該当のコード
ほぼ同じようなコードでも、エラーが**「発生しないパターン」**と**「発生するパターン」**があります。。。:worried:

##エラーが発生しないパターン

```typescript:functions/index.ts
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();
const db = admin.firestore();

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript

// eventが作成された時にカウントする
exports.countEvents = functions.region('asia-northeast1').firestore
  .document('users/{userId}/events/{eventId}')
  .onWrite((change, context) => {

    let periods: boolean;
    let dayEventCounts: number;
    if (!change.before.exists) {
      periods = change.after.get('periods');
      dayEventCounts = change.after.get('dayEventCounts');
    } else {
      periods = change.before.get('periods');
      dayEventCounts = change.before.get('dayEventCounts');
    }

    const userId = context.params.userId;
    const FieldValue = admin.firestore.FieldValue;
    const countsRef = db.collection('users').doc(userId);    

    if (!change.before.exists && !periods) {
      // 登録時に件数をインクリメント
      countsRef.update({ eventCount: FieldValue.increment(dayEventCounts) });
      return
    } else if (change.before.exists && !change.after.exists && !periods) {
      // 削除時に件数をデクリメント
      countsRef.update({ eventCount: FieldValue.increment(-dayEventCounts) });
      return
    }
    return;
  });

exports.monthCountEvents = functions.firestore.document('users/RmSJbxK2A2QNWZbm2nLQwEr7tNw2/events/{eventId}')
  .onWrite((change) => {
    let pushMonths: any;
    let periods: boolean;
    let dayEventCounts: number;
    if (!change.before.exists) {
      pushMonths = change.after.get('pushMonths');
      periods = change.after.get('periods');
      dayEventCounts = change.after.get('dayEventCounts');
    } else {
      pushMonths = change.before.get('pushMonths');
      periods = change.before.get('periods');
      dayEventCounts = change.before.get('dayEventCounts');
    }

    const FieldValue = admin.firestore.FieldValue;
    const countsRef = db.collection(`users/RmSJbxK2A2QNWZbm2nLQwEr7tNw2/counts`).doc(pushMonths);
    countsRef.get().then((docSnapshot) => {
      if (!docSnapshot.exists) {
        countsRef.set({ monthCount: 1, monthDate: pushMonths });
      } 
    });

     if (!change.before.exists && !periods) {
      // 登録時に件数をインクリメント
      return countsRef.update({ monthCount: FieldValue.increment(dayEventCounts) } );
    } else if (change.before.exists && !change.after.exists && !periods) {
      // 削除時に件数をデクリメント
      return countsRef.update({ monthCount: FieldValue.increment(-dayEventCounts) });
     }
    return
  })
```

この`monthCountEvents`はなんのエラーもなく発動します。
**これはテスト用なので、自分のuidを指定して`onWrite`がトリガーするようにしています**。



##エラーが発生するパターン

```typescript:functions/index.ts
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();
const db = admin.firestore();

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript

// eventが作成された時にカウントする
exports.countEvents = functions.region('asia-northeast1').firestore
  .document('users/{userId}/events/{eventId}')
  .onWrite((change, context) => {

    let periods: boolean;
    let dayEventCounts: number;
    if (!change.before.exists) {
      periods = change.after.get('periods');
      dayEventCounts = change.after.get('dayEventCounts');
    } else {
      periods = change.before.get('periods');
      dayEventCounts = change.before.get('dayEventCounts');
    }

    const userId = context.params.userId;
    const FieldValue = admin.firestore.FieldValue;
    const countsRef = db.collection('users').doc(userId);    

    if (!change.before.exists && !periods) {
      // 登録時に件数をインクリメント
      countsRef.update({ eventCount: FieldValue.increment(dayEventCounts) });
      return
    } else if (change.before.exists && !change.after.exists && !periods) {
      // 削除時に件数をデクリメント
      countsRef.update({ eventCount: FieldValue.increment(-dayEventCounts) });
      return
    }
    return;
  });

exports.monthCountEvents = functions.region('asia-northeast1').firestore
  .document('users/{userId}/events/{eventId}')
  .onWrite((change, context) => {

    let pushMonths: any;
    let periods: boolean;
    let dayEventCounts: number;
    if (!change.before.exists) {
      pushMonths = change.after.get('pushMonths');
      periods = change.after.get('periods');
      dayEventCounts = change.after.get('dayEventCounts');
    } else {
      pushMonths = change.before.get('pushMonths');
      periods = change.before.get('periods');
      dayEventCounts = change.before.get('dayEventCounts');
    }

    const userId = context.params.userId;
    const FieldValue = admin.firestore.FieldValue;
    const monthCountRef = db.collection(`users/${userId}/counts`).doc(pushMonths);
    monthCountRef.get().then((docSnapshot) => {
      if (!docSnapshot.exists) {
        monthCountRef.set({ monthCount: 1, monthDate: pushMonths });
      }
    });

    if (!change.before.exists && !periods) {
      // 登録時に件数をインクリメント
      return monthCountRef.update({ monthCount: FieldValue.increment(dayEventCounts) });
    } else if (change.before.exists && !change.after.exists && !periods) {
      // 削除時に件数をデクリメント
      return monthCountRef.update({ monthCount: FieldValue.increment(-dayEventCounts) });
    }
    return;
  });
```

**この`monthCountEvents`は本番用なので、自分のuidではなくワイルドカードを使い、`onWrite`をトリガーしています。**


何が違って、何が原因なのかさっぱりわかりません。。。
どなたかご教授ください！！

cloud functionsのエラー「Error: Process exited with code 16」が発生する原因は？

# 不明点
ReactからCloud Firestoreにupdate(更新)する際、フォームに何かしら編集したら問題なく更新できるのですが、何もフォームをいじらずにsubmitすると、値が空になって更新されてしまいます。

理屈を仮定すると何もonChangeしてないから`e`の引数に何も入らずsetNameの`e.target.value`が自ずと空になるから空の値が更新されてしまうのかなと思いますが、この問題を解決する方法が全くわからず困っています。

onChangeしない場合、今入っている値をそのまま更新する方法はありますか？

```jsx
<h2>編集フォーム</h2>
    <form onSubmit={handleEditFormSubmit}>
        <input
            type="text"
            value={name !== '' ? name : createUser?.name || ''}
            placeholder="ユーザー名"
            onChange={(e) => setName(e.target.value)}
        />

        <button type="submit">編集</button>
    </form>
```

コード全文
```jsx
import { useState } from 'react';
import firebase, { db } from '../../Firebase';
import Styles from './css/User.module.css';
import { useForm } from 'react-hook-form';
import { useCollectionData } from 'react-firebase-hooks/firestore';
import { UserTypes } from '../../types/types';

export const User = () => {
    const [name, setName] = useState('');
    const [pending, setPending] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const { register, formState: { errors }, handleSubmit } = useForm();

    const user = firebase.auth().currentUser;
    let authId: string | undefined;

    if (user != null) {
        user.providerData.forEach(() => {
            authId = user.uid;
        });
    }

    const OnSubmit = async () => {
        setPending(true);
        try {
            await firebase.firestore().collection('users').add({
                authId,
                name,
            });
            setSubmitted(true);
        } finally {
            setPending(false);
        }
    };

    const [list, loading, error] = useCollectionData<UserTypes>(db.collection('users'), { idField: 'docId' });
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error...</div>;

    const createUser = list?.find((user) => user.authId === authId);

    const handleEditFormSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        setPending(true);
        try {
            if (createUser) {
                await firebase.firestore().collection('users').doc(createUser.docId).update({
                    name,
                });
                setSubmitted(true);
                window.location.reload();
            }
        } catch (error) {
            console.error('Error updating user:', error);
        } finally {
            setPending(false);
        }
    };

    return (
        <section className={Styles.user}>
            {!createUser ? (
                <div>
                    <h2>登録フォーム</h2>
                    <form onSubmit={handleSubmit(OnSubmit)}>
                        <input
                            {...register('name', { required: true })}
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="ユーザー名"
                            name="name"
                        />
                        {errors.name?.type === 'required' && 'お名前が入力されていません'}

                        <button type="submit">登録</button>
                        {pending && 'Pending...'}
                    </form>
                </div>
            ) : (
                <div>
                    <h2>編集フォーム</h2>
                    <form onSubmit={handleEditFormSubmit}>
                        <input
                            type="text"
                            value={name !== '' ? name : createUser?.name || ''}
                            placeholder="ユーザー名"
                            onChange={(e) => setName(e.target.value)}
                        />

                        <button type="submit">編集</button>
                    </form>
                    {submitted && <p>更新しました</p>}
                </div>
            )}
        </section>
    );
}
```

[React] Cloud Firestoreにupdateする際、フォームを編集しないと空の値で更新されてしまう

【前提】
・usersのサブコレクションにpostsを作成している


【質問】
記事詳細ページを作成するために、ユーザー横断でpostIDをもとにposts下の記事を取得したい場合は、どのように取得すれば良いでしょうか
できれば下記のようにサブコレクションを取得できると嬉しいのですが動かない
```ここに言語を入力
const snapshot = firestore
  .collection('posts')
  .doc(postID)
  .get()
```

※これだと動くが、ユーザーIDを知る必要があるので下記は無し
```ここに言語を入力
const snapshot = firestore
  .collection('users')
  .doc(userID)
  .collection('posts')
  .doc(postID)
  .get()
```