React+Next.js项目中JS函数返回Proxy而非普通对象问题求解

该现象是Next.js + React 18 运行环境的特性导致，有两种典型触发场景：

• 导入的func定义在顶部标记了'use server'的服务端文件中，作为Server Action被客户端组件调用：func内部的打印逻辑运行在服务端环境，此时返回值尚未经过跨环境传输处理，是原生普通对象；当返回值传递到客户端运行环境时，Next.js会自动将其包装为Proxy，用于后续数据变更跟踪和序列化兼容，因此客户端打印时会显示proxy标识。
• 返回结果被直接存入响应式状态：如果将func返回的结果直接赋值给useState、useReducer或者MobX、Zustand这类响应式状态管理库的状态，React运行时或状态管理库会对需要做响应式跟踪的对象做Proxy包装，控制台打印就会显示proxy标识。

Proxy包装本身不会影响正常的属性读取、遍历等操作，无特殊需求可直接使用。如果需要获取纯普通对象，可根据场景选择以下方法脱Proxy：

• 简单对象结构场景：使用扩展运算符遍历重组

const res = func(arr).map(item => ({...item}))

• 包含Date、ArrayBuffer等复杂数据类型的场景：使用结构化克隆处理

const res = structuredClone(func(arr))

• 纯JSON兼容数据场景：使用序列化反序列化处理

const res = JSON.parse(JSON.stringify(func(arr)))

如果是调用Server Action的场景，注意要先await拿到返回值再做处理：

const rawRes = await func(arr)
const res = structuredClone(rawRes)

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