I am trying to pass the currentUser object returned from getCurrentUser to the UserMenu component. However, I’m encountering a type error stating that the type is not as expected. Here is the code and the error message:
i am getting an error where i signaled with the ??? my currentUser gets the type User from the prisma but instead of updatedAt,emailVerified and createdAt are now string and not dates, for that i have created a new type called SafeUser,which has the definion downwards that has 3 strings named the same as User meant to save the data, but i get this error, can somebody please help me resolve it?

Type '{ createdAt: string; updatedAt: string; emailVerified: string | null; id: string; name: string | null; email: string | null; image: string | null; hashedPassword: string | null; role: Role; } | null | undefined' is not assignable to type 'SafeUser | null'.
Type 'undefined' is not assignable to type 'SafeUser | null'.ts(2322)
UserMenu.tsx(13, 5): The expected type comes from property 'currentUser' which is declared here on type 'IntrinsicAttributes & UserMenuProps'

const MainComponent = async () => {
  const currentUser = await getCurrentUser();

  return (
    <div className="sticky top-0 w-full bg-slate-200 z-30 shadow-sm">
      <div className="py-4 border-b-[1px]">
        <Container>
          <div className="flex items-center justify-between gap-3 md-gap-0">
            <Link href="/" className={`${redressed.className} font-bold text-2xl`}>E-Shop</Link>
            <div className="hidden md:block">Search</div>
            <div className="flex items-center gap-8 md:gap-12">
              <CartCount />
              <UserMenu currentUser={currentUser} /> **???**
            </div>
          </div>
        </Container>
      </div>
    </div>
  );
};

export default MainComponent;


import React, { useState, useCallback } from 'react';
import Link from 'next/link';
import { AiFillCaretDown } from 'react-icons/ai';
import Avatar from './Avatar'; // Ensure Avatar is imported correctly
import MenuItem from './MenuItem'; // Ensure MenuItem is imported correctly
import BackDrop from './BackDrop'; // Ensure BackDrop is imported correctly
import Container from './Container'; // Ensure Container is imported correctly
import CartCount from './CartCount'; // Ensure CartCount is imported correctly
import { signOut } from 'next-auth/react';
import { redressed } from '@/styles/fonts'; // Ensure redressed is imported correctly

interface UserMenuProps {
  currentUser: SafeUser | null;
}

const UserMenu: React.FC<UserMenuProps> = ({ currentUser }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = useCallback(() => {
    setIsOpen((prev) => !prev);
  }, []);

  return (
    <>
      <div className="relative z-30">
        <div
          onClick={toggleOpen}
          className="p-2 border-[1px] border-slate-400 flex flex-row items-center gap-1 rounded-full cursor-pointer hover:shadow-md transition text-slate-700"
        >
          <Avatar />
          <AiFillCaretDown />
        </div>
        {isOpen && (
          <div className="absolute rounded-md shadow-md w-[170px] bg-white overflow-hidden right-0 top-12 text-sm flex flex-col cursor-pointer">
            {currentUser ? (
              <div>
                <Link href="/orders">
                  <MenuItem onClick={toggleOpen}>Your Orders</MenuItem>
                </Link>
                <Link href="/admin">
                  <MenuItem onClick={toggleOpen}>Admin Dashboard</MenuItem>
                </Link>
                <hr />
                <MenuItem
                  onClick={() => {
                    toggleOpen();
                    signOut();
                  }}
                >
                  Logout
                </MenuItem>
              </div>
            ) : (
              <div>
                <Link href="/login">
                  <MenuItem onClick={toggleOpen}>Login</MenuItem>
                </Link>
                <Link href="/register">
                  <MenuItem onClick={toggleOpen}>Register</MenuItem>
                </Link>
              </div>
            )}
          </div>
        )}
      </div>
      {isOpen && <BackDrop onClick={toggleOpen} />}
    </>
  );
};

export default UserMenu;


import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth";
import prisma from "@/libs/prismadb";

export async function getSession() {
  return await getServerSession(authOptions);
}

export async function getCurrentUser(): Promise<SafeUser | null> {
  try {
    const session = await getSession();

    if (!session?.user?.email) {
      return null;
    }

    const currentUser = await prisma.user.findUnique({
      where: {
        email: session.user.email,
      },
    });

    if (!currentUser) {
      return null;
    }

    return {
      ...currentUser,
      createdAt: currentUser.createdAt.toISOString(),
      updatedAt: currentUser.updatedAt.toISOString(),
      emailVerified: currentUser.emailVerified?.toISOString() || null,
    };
  } catch (error: any) {
    console.log(error);
    return null; // Ensure null is returned in case of an error
  }
}


import { User } from "@prisma/client";

export type SafeUser = Omit<User, "createdAt" | "updatedAt" | "emailVerified"> & {
  createdAt: string;
  updatedAt: string;
  emailVerified: string | null;
};

// Prisma schema definition for reference
/*
model User {
  id          String   @id @default(auto()) @map("_id") @db.ObjectId
  name        String?
  email       String?  @unique
  emailVerified DateTime?
  image       String?
  hashedPassword String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  role        Role     @default(USER)
  accounts    Account[]
}

enum Role {
  USER
  ADMIN
}
*/