[TroubleShooting] Props내리는과정에서 알수없는 오류

처음에는 오류의 원인을 잘못잡았다.

 

그래서 계속 Promise와 관련된 오류인지 알고 다른곳에서 헤매고 있었다.

 

근데 props의 type을 

interface BoardProps {
  data: IboardItem[];
}

이렇게 바꾸니 오류가 바꼈다.

 

이런 Promise와 관련된 오류가 아닌 withId<Document> 저부분과 관련된 오류인것 같았다.

 

그래서 검색해보니 withId는 mongoDB에서 가져온 데이터의 타입을 말한단다.

근데 맞다.

난 현재 mongoDB에서 데이터를 가져와서 그걸 밑의 컴포넌트로 내려서 사용하려고 하는과정에서 오류가 계속 발생하는 것이었다.

 

WithId는 기본적으로 _id 필드와 관련된 타입이다. 그러나 IboardItem에는 _id말고도  title도 있고 content도 있다.

title과 content는 _id와는 다른 형태의 타입이다. _id는 Objectid 와 관련이 있다.

그래서 제네릭을 이용해서 IboardItem \ null 이런식으로 지정해주어야한다.

 

IboardItem[] | null

 

 

 

---

import { connectDB } from "@/util/database";
import BoardItem from "./BoardItem";
import { ObjectId } from "mongodb";


export interface IboardItem {
  _id: ObjectId;
  title: string;
  content: string;
  author?: string;
}
export interface BoardProps {
  data: IboardItem[];
}

export default async function Qa() {
  const client = await connectDB;
  const db = client.db("market");
  const data: IboardItem[] | null = await db
    .collection<IboardItem>("post")
    .find()
    .toArray();


  return (
    <div className="list-bg">
      <BoardItem data={data} />
    </div>
  );
}

 

"use client";

import type { IboardItem, BoardProps } from "../board/page";

export default function BoardItem({ data }: BoardProps) {
  return (
    <div>
      <h2>Q & A</h2>
      {data[0].content}
    </div>
  );
}