Next.js多页面传多文件引用报错：gcs_uris未定义

错误根源定位 #

TypeError: Cannot read properties of undefined (reading 'gcs_uris') 本质是你在 page_one.tsx 中尝试访问 responseData.gcs_uris 时，responseData 本身为 undefined，或者后端返回的响应里根本没有 gcs_uris 字段。

具体可能原因 #

1. 后端接口响应异常

   • 多文件上传时，后端处理逻辑出错（比如文件存储失败、参数校验不通过），返回了非200状态码的响应，此时 response.json() 解析出的内容是错误信息（比如 {error: "上传失败"}），而非包含 gcs_uris 的预期结构。
   • 后端接口在多文件场景下的返回字段名变更（比如拼写错误成 gcsUris 或者 gcs-uris），导致前端找不到对应字段。

2. 前端未校验响应状态
   当前代码直接解析响应为JSON，没有检查请求是否成功。即使后端返回400/500错误，代码依然会尝试读取 gcs_uris，自然触发报错。

分步解决建议 #

1. 排查后端响应结构 #

在 page_one.tsx 的 response.json() 后，立即打印完整响应数据，确认是否包含预期字段：

const responseData = await response.json();
console.log('后端完整响应:', responseData); // 新增打印
const gcs_uris = responseData.gcs_uris;

如果打印结果里没有 gcs_uris，直接检查后端多文件上传接口：

• 确认多文件处理时是否正确生成了GCS地址数组
• 确认接口返回的JSON结构是否包含 gcs_uris 字段
• 检查后端是否因为文件大小、格式限制返回了错误信息

2. 前端添加响应状态校验 #

在解析JSON之前，先判断请求是否成功，避免处理错误响应：

try{
  const response = await fetch('http://127.0.0.1:8000/Files', {
    method: 'POST',
    body: formData
  })
  // 新增：校验响应状态
  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(`上传失败: ${errorData.message || response.statusText}`);
  }
  const responseData = await response.json();
  console.log('后端完整响应:', responseData);
  const gcs_uris = responseData.gcs_uris;
  // ... 后续编码和跳转逻辑
}
catch(err){
  console.error('上传或跳转出错:', err);
}

3. 优化page_two的容错处理 #

即使前端传递参数正确，也可能因为URL解析异常出问题，添加解析容错：

useEffect(() => {
  const encodedUris = router.query.gcs_uris;
  if (encodedUris) {
    try {
      const decodedUris = JSON.parse(decodeURIComponent(encodedUris));
      // 确认是数组再设置状态
      if (Array.isArray(decodedUris)) {
        setGcsUris(decodedUris);
      } else {
        console.warn('gcs_uris参数不是数组:', decodedUris);
      }
    } catch (e) {
      console.error('解析gcs_uris失败:', e);
    }
  }
}, [router.query]);

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