I'm working on a page.tsx for a dynamic route trips/[id]. I need to retrieve a document from Firebase based on the logged-in user, using useAuthContext() to access the user object. When I try to use useAuthContext inside the server component, I get the following error:

This code gives error on useAuthContext:
Error: (0 , src_auth_hooksWEBPACK_IMPORTED_MODULE_5.useAuthContext) is not a function

-----------------------------------------------------------------------------------------
import { doc, getDoc } from 'firebase/firestore';

import { CONFIG } from 'src/config-global';
import { FIRESTORE } from 'src/lib/firebase';

import { TripDetailsView } from 'src/sections/trips/view';

import { useAuthContext } from 'src/auth/hooks';

// ----------------------------------------------------------------------

export const metadata = { title: Trip details - ${CONFIG.appName} };

type Props = {
params: { id: string };
};

export default async function Page({ params }: Props) {
const { id } = params;

const { user } = useAuthContext()

const tripRef = doc(FIRESTORE, 'users', user?.uid, 'trips', id);

const docSnap = await getDoc(tripRef);
const trip = docSnap.data();

return <TripDetailsView trip={trip} />;
}

I can't use the useAuthContext hook inside a server component because React doesn't support hooks like this on the server side. But I need access to the authenticated user (user.uid) to get the trip document from Firestore.

If the circumstances where so that I didn't need the user and I remove the line const { user } = useAuthContext() , then the page works. However, I obviously need that user to fetch the relevant trip data. How can I resolve this?