06. 자살예방웹사이트- 'QuerySnapshot<DocumentData, DocumentData>' 유형에 없음

ERROR in src/components/Post/PostDetail.tsx:171:23

TS2339: Property 'exists' does not exist on type 'QuerySnapshot<DocumentData, DocumentData>'. 169 | // 셋커멘트에 전체 데이터가 아니라 댓글만 가지고 와서 상태에 저장해야한다. 170 | > 171 | if (commentdata.exists()) { | ^^^^^^ 172 | const commentsData = commentdata.data(); // 게시물 정보를 가져옵니다. 173 | setComments({ ...commentsData }); 174 | } else {

ERROR in src/components/Post/PostDetail.tsx:172:42

TS2339: Property 'data' does not exist on type 'QuerySnapshot<DocumentData, DocumentData>'. 170 | 171 | if (commentdata.exists()) { > 172 | const commentsData = commentdata.data(); // 게시물 정보를 가져옵니다. | ^^^^ 173 | setComments({ ...commentsData }); 174 | } else { 175 | console.log("게시물을 찾을 수 없습니다.");

원인 :

commentdata가 QuerySnapshot<DocumentData, DocumentData> 형식인데, 이 형식은 여러 개의 문서로 이루어진 쿼리 결과를 나타냅니다. 따라서 .data()를 호출할 수 없습니다.

댓글 데이터를 가져오려면 commentdata가 아니라 QueryDocumentSnapshot<DocumentData>를 사용해야 합니다. 또한, 댓글 데이터가 여러 개일 수 있으므로 이를 반복 처리하여 댓글 목록을 만들어야 합니다.

 

 

 

<기존 코드>

 useEffect(() => {
    const usersCollectionRef = collection(db, `posts/${postId}/comments`);

    // 비동기로 데이터 받을준비
    const getComments = async () => {
      // getDocs로 컬렉션안에 데이터 가져오기
      const commentdata = await getDocs(usersCollectionRef);
      // 셋커멘트에 전체 데이터가 아니라 댓글만 가지고 와서 상태에 저장해야한다.

      if (commentdata.exists()) {
        const commentsData = commentdata.data(); // 게시물 정보를 가져옵니다.
        setComments({ ...commentsData });
      } else {
        console.log("게시물을 찾을 수 없습니다.");
      }

      console.log(comments);
    };

    getComments();
  }, []);

<수정코드>

useEffect(() => {
  // Firebase Firestore에서 해당 게시물의 댓글 정보를 가져오는 비동기 함수
  async function fetchComments() {
    try {
      const commentsRef = collection(db, "comments"); // "comments"는 댓글 컬렉션 이름
      const querySnapshot = await getDocs(commentsRef);

      if (!querySnapshot.empty) {
        const commentsData = querySnapshot.docs.map((doc) => {
          const data = doc.data();
          return { ...data, commentId: doc.id }; // 댓글 문서 ID를 추가해서 저장
        });
        setComments(commentsData);
      } else {
        console.log("댓글을 찾을 수 없습니다.");
      }
    } catch (error) {
      console.error("댓글을 불러오는 중 오류가 발생했습니다.", error);
    }
  }

  fetchComments(); // 댓글 정보를 가져오는 함수 호출
}, []);