MongoDB에서 데이터를 가져올때 타입 에러(WithId)

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

interface Result {
  _id: ObjectId;
  title: string;
  content: string;
}

interface Props {
  params: {
    id: string;
  };
}

export default async function Detail(props: Props) {
  const client = await connectDB;
  const db = client.db("forum");
  let result: Result | null = await db
    .collection("post")
    .findOne({ _id: new ObjectId("64bf1275f16c955c6e701c97") });
  console.log(result);

  if (!result) {
    // 데이터가 없을 경우에 대한 처리
    return <div>Data not found</div>;
  }

  return (
    <div>
      <h4>상세페이지</h4>
      <h4>{result.title}</h4>
      <p>{result.content}</p>
    </div>
  );
}

이 코드에서 let result: Result | null = await db 부분을 살펴보면 타입이 Result 혹은 null일 경우를 생각해서 적었지만 오류가 뜬다.

Type 'WithId | null' is not assignable to type 'Result | null'.
Type 'WithId' is not assignable to type 'Result | null'.
Type 'WithId' is missing the following properties from type 'Result': title, content

왜 이런 오류가 뜰까 읽어보니 WithId | null 타입을 Result | null 타입에 할당할 수 없다고 나와있다.

WithId는 MongoDB에서 가져온 데이터의 타입을 나타내는데, 기본적으로 _id 필드와 관련된 타입입니다. 그러나 Result 타입에는 title과 content라는 추가 필드가 있어서 WithId와는 다른 형태의 타입이다.
이 문제를 해결하려면 findOne 메서드의 반환 타입을 명시적으로 Result | null로 지정해주어야 합니다. 이를 위해 findOne 메서드에 제네릭을 사용하여 반환 타입을 Result | null로 지정해야 합니다.

WithId 타입은 MongoDB에서 사용되는 데이터 타입 중 하나입니다. MongoDB의 findOne 메서드를 사용하여 데이터를 가져오면, 해당 데이터는 기본적으로 WithId 타입으로 추론됩니다.

변경된 코드

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

interface Result {
_id: ObjectId;
title: string;
content: string;
}

interface Props {
params: {
  id: string;
};
}

export default async function Detail(props: Props) {
const client = await connectDB;
const db = client.db("forum");
let result: Result | null = await db
  .collection<Result>("post") // 여기에 제네릭으로 Result를 지정합니다.
  .findOne({ _id: new ObjectId("64bf1275f16c955c6e701c97") });

if (!result) {
  // 데이터가 없을 경우에 대한 처리
  return <div>Data not found</div>;
}

console.log(props);

return (
  <div>
    <h4>상세페이지</h4>
    <h4>{result.title}</h4>
    <p>{result.content}</p>
  </div>
);
}