Next 13报错：无法解构undefined的属性'devices'

核心原因 #

1. 异常时无返回值：你的getDevices函数在catch块里仅打印错误，未返回任何内容。当请求失败（比如网络问题、接口返回非200状态码），函数会返回undefined，此时解构{devices}必然报错。
2. 接口返回结构可能不匹配：即便请求成功，如果/api/getdevice返回的JSON中没有devices字段，解构操作同样会失败。

修复步骤 #

1. 给catch块添加返回值或抛出错误 #

根据业务需求选择两种处理方式：

方案A：抛出错误（推荐，适合需要显示错误提示的场景）

让错误向上传递，由组件捕获并处理：

const getDevices = async () => {
  try {
      const res = await fetch('/api/getdevice',{ cache: 'no-store' })
      if (!res.ok){
        throw new Error("Failed to get device list")
      }
      return res.json();
  } catch (error){
      console.log("Error loading devices: ", error);
      // 抛出错误让组件处理
      throw error;
  }
}

组件中用try/catch包裹请求逻辑：

const HomePage = async () => {
  let devices = [];
  try {
    const data = await getDevices();
    devices = data.devices || [];
  } catch (err) {
    // 这里可以添加错误提示UI，比如渲染错误文本
    console.error(err);
  }
   
  return (
    <>
      {devices.map((device)=> /* 你的渲染逻辑 */)}
    </>
  )
}

方案B：返回默认空结构（适合静默处理错误，显示空列表）

直接返回包含空devices数组的对象，避免解构失败：

const getDevices = async () => {
  try {
      const res = await fetch('/api/getdevice',{ cache: 'no-store' })
      if (!res.ok){
        throw new Error("Failed to get device list")
      }
      return res.json();
  } catch (error){
      console.log("Error loading devices: ", error);
      // 返回默认结构，确保解构不会报错
      return { devices: [] };
  }
}

2. 验证接口返回结构 #

先确认/api/getdevice的返回格式是否符合预期，正确的结构应该类似：

{
  "devices": [
    { "id": 1, "name": "Device 1" },
    { "id": 2, "name": "Device 2" }
  ]
}

如果接口直接返回设备数组（比如[{"id":1,...}]），则需要修改解构方式：

// 接口返回数组时直接接收
const devices = await getDevices();

3. 解构时添加默认值（额外防护） #

在解构时增加默认值，避免意外的undefined导致报错：

// 确保即使getDevices返回undefined，也能安全解构
const { devices = [] } = await getDevices() || {};

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