Get undefined while try to create a dynamic route in nextjs

Question

I am creating a blog with next.js typescript and I succeeded to fetch all my posts from MongoDB. But I couldn't create the single page which shows a single post using the id.

This is my route.ts

I tested the API and it works correctly I just put it here in case of clarification.

import { connectDB } from "@/database/dbConfig";
import Post from "@/models/postModel";

// GET /api/posts
export const GET = async ({ params }) => {
  try {
    await connectDB();

    const post = await Post.findById(params.id);

    if (!post) return new Response("Property Not Found", { status: 404 });
    return new Response(JSON.stringify(post), {
      status: 200,
    });
  } catch (error) {
    console.log(error);
    return new Response("Something went wrong", { status: 500 });
  }
};

Now this is the the singlePostPage component:

const SinglePostPage = () => {
  const { id } = useParams();
  const [singlePost, setSinglePost] = useState();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchPosts = async () => {
      if (!id) return;
      try {
        const singlePost = await fetchSinglePost(id);
        setSinglePost(singlePost);
      } catch (error) {
        console.error("Error fetching posts" + error);
      } finally {
        setLoading(false);
      }
    };

    if (singlePost === null) {
      fetchPosts();
    }

  }, [id, singlePost]);

  return (
    <div className="singlepostPage">
      <h2>Test</h2>
    </div>
  );
};

export default SinglePostPage;

And this is the fetchSinglePost function:

async function fetchSinglePost(id: string | any) {
  try {
    if (!apiDomain) {
      return null;
    }

    const res = await fetch(`${apiDomain}/posts/${id}`);

    if (!res.ok) {
      throw new Error("Failed to fetch data");
    }

    return await res.json();
  } catch (error) {
    throw new Error("Failed to fetch data");
  }
}

I get undefined when I console.log the singlePost. Last time I was trying I got null. I did it with Nextjs javascript version before and it worked.
I've already checked the apiDomain in .env and it's correct.

Answer 1

in the MongoDB one document finding you use the findOne method. here you are using findById. I think you missed this. const post = await Post.findOne(query, options); not const post = await Post.findById(params.id);