Express正常运行的API代码在Next.js/React中报Cannot read properties错误

问题核心 #

错误源于gsmarena对象未正确导入，同时代码存在语法错误，另外React客户端环境直接使用该库还会遇到Node.js API依赖的限制。

修复步骤 #

1. 修正模块导入方式 #

gsmarena-api是CommonJS模块，采用默认导出而非命名导出。将Next.js中的导入语句修改为：

import gsmarena from "gsmarena-api";

原代码import {gsmarena} from "gsmarena-api"会导致gsmarena变量为undefined，因为库中不存在这个命名导出项。

2. 修复Next.js API路由的语法错误 #

你的代码返回语句中{ data: any }是错误写法——any是TypeScript类型关键字，不能直接作为值使用，需替换为实际变量name：

export async function GET() {
  const devices = await gsmarena.catalog.getBrand("apple-phones-48");
  const name = devices.map((device: any) => device.name);
   
  return Response.json({ data: name });
}

3. React客户端环境适配 #

该库基于Node.js环境开发，依赖Node专属API（如服务端HTTP请求模块），直接在React客户端组件中调用会报错。推荐解决方案：

• 通过Next.js API路由中转：客户端组件使用fetch('/api/phonelist')请求你编写的API路由，由服务端完成gsmarena-api的调用
• 若必须在客户端使用，需替换库中的Node专属依赖（如将node-fetch替换为浏览器原生fetch），但这种方式需要修改库源码，成本较高，不推荐

验证 #

修改完成后重启Next.js开发服务器，访问API路由即可正常返回苹果设备名称列表；React客户端通过fetch请求该接口即可获取数据。

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