FirebaseError: Function CollectionReference.doc() cannot be called with an empty path.というエラーについて

前提・実現したいこと

現在ReactとFirebaseを使用して掲示板アプリを作成しております。掲示板カテゴリのboardsコレクションと掲示板コメントのmessagesコレクションを紐付けるコードを書いていました。

子コンポーネントであるMessageFormコンポーネントの方でfirestoreに入れ子構造でデータを格納する処理はエラーも無く行えるのですが下記のUseEffectのコードを書くとエラーが発生してしまいます。

.doc(board.id)のboard.idの部分を取り除くとエラーが消えるのでこの部分がおかしいのではないかと色々試行錯誤したのですがどうしても同じエラーが出続けてしまいます。エラーメッセージを検索しても同じエラーがヒットしなかった為こちらで質問させていただきます。

プログラミング初心者で説明が至らなくて申し訳ありませんがご教授いただけますと幸いです。何卒よろしくお願い致します。

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

エラーメッセージ FirebaseError: Function CollectionReference.doc() cannot be called with an empty path.

該当のソースコード

ソースコード import React, { useEffect, useState } from 'react';
import { Comment, Segment } from 'semantic-ui-react';
import MessageForm from './MessageForm';
import MessageHeader from './MessageHeader';
import firebase from '../../app/firebase';
import { useDispatch, useSelector } from 'react-redux';
import Message from './Message';
import { selectUser } from '../../app/userSlice';

type MessagesProps = {
  board: {
    id: string;
    name: string;
    details: string;
    createdBy: {
      uid: string;
      displayName: string;
      photoURL: string;
    };
  };
  boards: {
    id: string;
    name: string;
    details: string;
    createdBy: {
      uid: string;
      displayName: string;
      photoURL: string;
    };
  }[];
};

const Messages: React.FC<MessagesProps> = ({ board, boards }) => {
  const dispatch = useDispatch();
  const [fileModal, setFileModal] = useState(false);
  const [messages, setMessages] = useState([
    {
      id: '',
      content: '',
      photo: null,
      byUser: {
        uid: '',
        displayName: '',
        photoURL: '',
      },
    },
  ]);
  const [messageModal, setMessageModal] = useState(false);
  const [photo, setPhoto] = useState<File | null>(null);
  const user = useSelector(selectUser);

  const handleChangePhoto = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files![0]) {
      setPhoto(e.target.files![0]);
      e.target.value = '';
    }
  };

  const handleSubmitPhoto = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const S = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    const N = 16;
    const randomChar = Array.from(crypto.getRandomValues(new Uint32Array(N)))
      .map((n) => S[n % S.length])
      .join('');
    const fileName = randomChar + '_' + photo!.name;
    const uploadPhoto = firebase
      .storage()
      .ref(`photos/${fileName}`)
      .put(photo!);
    uploadPhoto.on(
      firebase.storage.TaskEvent.STATE_CHANGED,
      () => {},
      (err) => {
        alert(err.message);
      },
      async () => {
        await firebase
          .storage()
          .ref('photos')
          .child(fileName)
          .getDownloadURL()
          .then(async (url) => {
            await firebase
              .firestore()
              .collection('messages')
              .add({
                content: '',
                photo: url,
                byUser: {
                  uid: user.uid,
                  displayName: user.displayName,
                  photoURL: user.photoURL,
                },
              });
          });
      }
    );
    setFileModal(false);
  };

  useEffect(() => {
    const unSub = firebase
      .firestore()
      .collection('boards')
      .doc(board.id)
      .collection('messages')
      .onSnapshot((snapshot) => {
        setMessages(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            content: doc.data().content,
            photo: doc.data().photo,
            byUser: {
              uid: doc.data().byUser.uid,
              displayName: doc.data().byUser.displayName,
              photoURL: doc.data().byUser.photoURL,
            },
          }))
        );
      });
    return () => {
      unSub();
    };
  }, []);

  return (
    <div className='message__container'>
      <MessageHeader board={board} />
      <Segment className='animation'>
        <Comment.Group className='messages'>
          {messages.length > 0 &&
            messages.map((message) => (
              <Message key={message.id} message={message} user={user} />
            ))}
        </Comment.Group>
      </Segment>
      {boards.map((board) => (
        <MessageForm
          user={user}
          board={board}
          messageModal={messageModal}
          setMessageModal={setMessageModal}
          fileModal={fileModal}
          setFileModal={setFileModal}
          changePhoto={handleChangePhoto}
          submitPhoto={handleSubmitPhoto}
        />
      ))}
    </div>
  );
};

export default Messages;

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hoshi-takanori

2021/01/18 13:31

このコンポーネントはどのように使われてますか？ doc(board.id) の board.id が空の状態で呼んでることが問題のようなので、useEffect の先頭に console.log を入れるなりして、まず何が起こってるかを把握する必要があるのでは。

退会済みユーザー

2021/01/20 01:09

初めまして！返信が遅くなってしまい申し訳ございません。色々試行錯誤していたのですがそもそも実現したい事へのアプローチの仕方に大きく誤りがあった事に気付き修正したところこちらのエラーも発生せず解決する事が出来ました。お忙しい中質問へのアドバイスをしてくださりありがとうございます！ hoshi様からいただいたアドバイスは今後他の箇所でつまづいたときに是非使わせていただこうと思います！