javascript - 特定のドキュメント ID にリンクされたサブコレクションの作成 - Firestore

Question

皆さんこんにちは、

firestore データベースにある既存の投稿にコメントをリンクしようとしています。それはほとんど機能します.. :)しかし、何らかの理由で、特定の投稿にコメントするたびに、コレクションに既に存在するドキュメントのIDを使用する代わりに、新しいドキュメントを生成するだけです(「投稿」内の新しいドキュメントは自動的に新しい生成された ID)、コメントを含みます。

私が明らかに間違っていることは何か分かりますか？

これが私のコードです：

function Post({key, profilePic, image, username, timestamp, message}) {
  const [{ user }, dispatch] = useStateValue();
  const [comments, setComments] = useState([]);
  const [comment, setComment] = useState("");

  const sendComment = async (e) => {
    e.preventDefault();
    const commentToSend = comment;
    setComment('');
    await db.collection('posts').doc(key)
    .collection('comments').add ({
      comment: commentToSend,
      profilePic: user.photoURL,
      username: user.displayName,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    })
  }

  return (
    <div className="flex flex-col">
      <div className="p-5 bg-white mt-5 rounded-t-2xl shadow-sm">
        <div className="flex items-center space-x-2">
          <Avatar 
            src={profilePic} 
            className="rounded-full" 
          />
          <p className="font-medium">{username}</p>
        </div>
        <div className="pt-2">
          {timestamp ? (
              <p className="text-xs text-gray-400">
                {new Date(timestamp?.toDate()).toLocaleString()}
              </p>
            ) : (
              <p className="text-xs text-gray-400">Loading</p>
            )}
        </div>
        <p className="pt-4 pb-4">{message}</p>
        {image && (
          <div className="relative h-auto bg-white overflow-hidden">
            <img src={image} className="object-cover w-full" />
          </div>
        )}
      </div>
      <div className="flex justify-between items-center bg-white shadow-md text-gray-400 border-t">
        <div className="inputIcon p-3 rounded-none rounded-bl-2xl">
          <ThumbUpIcon className="h-4" />
          <p className="text-xs sm:text-base">Like</p>
        </div>
        <div className="inputIcon p-3 rounded-none">
          <ChatBubbleOutlineIcon className="h-4"/>
          <p className="text-xs sm:text-base">Comment</p>
        </div>
      </div>
      <div className="flex justify-evenly items-center rounded-b-2xl bg-white shadow-md text-gray-400 border-t">
      <form className="flex items-center p-4">
        <input 
          type="text"
          onChange={e => setComment(e.target.value)}
          value={comment}
          placeholder="Add a comment.."
          className="border-none flex-1 focus:ring-0 outline-none pr-10"
        />
        <button 
          type="submit"
          onClick={sendComment}
          className="pl-20 font-semibold text-red-400"
        >Post</button>
      </form>
    </div>
    </div>
  )
}

export default Post

それが重要かどうかはわかりませんが、私の記事をレンダリングする Feed.js は次のとおりです。

function Feed() {
  const [{ user }, dispatch] = useStateValue();
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    db.collection('posts').orderBy("timestamp", "desc").onSnapshot((snapshot) =>
      setPosts(snapshot.docs.map(doc => ({ id: doc.id, data: doc.data()})))
    );
  }, []);

  return (
    <div className="flex-grow pb-44 pt-1 mr-4 xl:mr-30">
      <div className="mx-auto max-w-md md:max-w-lg lg:max-w-2xl">
        {/* <StoryReel /> */}
        <MessageSender />
        {posts.map(post => (
          <Post
            key={post.data.id}
            profilePic={post.data.profilePic}
            message={post.data.message}
            timestamp={post.data.timestamp}
            username={post.data.username}
            image={post.data.image}
          />
        ))}
      </div>
    </div>
  )
}

export default Feed

手伝ってくれてどうもありがとう！