NextJS 13 Server Action无法访问父函数变量的解决方案咨询

为什么会出现这个问题 #

1. 嵌套Server Action的闭包丢失：fun1里的"use server"标记会让它成为独立的Server Action，Next.js会将其序列化后传递给客户端，执行时处于独立的服务器上下文，外层的test变量不会被包含在序列化内容里，所以执行时是undefined。
2. 普通异步函数无法传给客户端组件：fun2没有"use server"，属于页面组件的普通异步函数，能访问闭包变量，但这类函数无法被序列化，不能传递给客户端组件——就算强行传递，执行时也会在客户端环境运行，可能暴露服务器端逻辑或无法获取所需资源。

可行的解决方案 #

方案1：给Server Action传递参数

把需要的变量作为参数传给fun1，这样执行时就能拿到值，同时可以安全传递给客户端组件：

export default async function MyPage({ prisma, texts } : MyPageProps) {
    "use server"

    const test = "Hello"

    const fun1 = async (testVal: string) => {
        "use server";
        console.log(testVal); // 正常输出"Hello"
    }

    // 直接调用时传参
    fun1(test);

    // 传给客户端组件时，绑定参数（Next.js会处理为Server Action）
    return <RegisterPage registerFunc={() => fun1(test)} />;
}

这种方式下，test的值会被序列化后和Server Action关联，客户端触发registerFunc时，参数会被发送到服务器端执行fun1，不会暴露服务器端的实现逻辑。

方案2：在Server Action内部获取变量

如果test是动态生成（比如从数据库、配置文件获取），直接在fun1内部获取，不依赖外层闭包：

export default async function MyPage({ prisma, texts } : MyPageProps) {
    "use server"

    const fun1 = async () => {
        "use server";
        // 直接在Server Action内获取所需变量
        const test = "Hello"; // 或者通过prisma查询、读取配置等
        console.log(test); // 正常输出"Hello"
    }

    fun1();
    return <RegisterPage registerFunc={fun1} />;
}

这种方式避免了闭包依赖，更符合Server Action的设计逻辑，适合敏感数据的处理（因为数据不会经过客户端）。

方案3：传递非敏感变量作为组件props（仅适用于非敏感数据）

如果test是非敏感值，可以直接作为props传给RegisterPage，但注意敏感数据绝对不能这么做（会暴露给客户端）：

export default async function MyPage({ prisma, texts } : MyPageProps) {
    "use server"

    const test = "Hello"

    const fun1 = async () => {
        "use server";
        // 如果需要用到test，可以结合方案1传参，或者这里重新获取
        console.log(test);
    }

    fun1();
    // 直接传递非敏感的test给客户端组件
    return <RegisterPage registerFunc={fun1} test={test} />;
}

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