React+NextJS中useSession非函数错误排查（Lucia Auth场景）

错误根源 #

你的代码存在两个核心问题：

1. useSession钩子未返回上下文值，调用后得到undefined，解构操作触发错误，打包工具的异常提示显示为useSession is not a function；
2. page.tsx默认是服务器组件，不能直接调用客户端钩子useSession。

具体修复步骤 #

1. 修正useSession钩子的返回逻辑 #

修改SessionContext.tsx，让useSession返回上下文的实际值：

"use client";

import { createContext, useContext } from "react";
import { validateRequest } from "@/lib/lucia";

type ContextType = Awaited<ReturnType<typeof validateRequest>>;

const SessionContext = createContext<ContextType>({
    session: null,
    user: null,
});

export const useSession = () => {
    console.log("useSession function called");
    // 返回上下文值，供组件解构使用
    return useContext(SessionContext);
};

export const SessionProvider = ({
    children,
    value,
}: React.PropsWithChildren<{ value: ContextType }>) => {
    return (
        <SessionContext.Provider value={value}>
            {children}
        </SessionContext.Provider>
    );
};

2. 将page.tsx标记为客户端组件 #

客户端钩子只能在客户端组件中使用，在page.tsx顶部添加"use client"指令：

"use client";

import { useSession } from "../SessionContext";

export default function UserPage() {
    const { session } = useSession();

    return <pre>{JSON.stringify(session, null, 2)}</pre>;
}

额外验证点 #

• 确认validateRequest函数返回的结构包含session和user字段（允许为null），与ContextType定义匹配；
• 根布局layout.tsx中SessionProvider的value传递逻辑正确，无需修改。

内容的提问来源于stack exchange，提问作者rebellion