Next.js Server Actions变量未赋值先使用问题（try-catch解决方案）

错误原因很直接：如果getContact(104)调用失败进入catch块，contact变量从未被赋值，TypeScript会严格检测到这个未初始化的风险，从而抛出错误。以下是两种符合你需求的try-catch写法：

方案1：初始化变量并处理无数据情况 #

给contact明确包含undefined的类型，后续使用前先判断是否存在，避免传递未定义的值给组件：

export default async function Page() {
  let contact: Contact | undefined;

  try {
    [contact] = await getContact(104);
  } catch (e: unknown) {
    // 安全处理错误类型
    if (e instanceof Error) {
      console.log(e.message);
    }
  }

  // 渲染前检查数据是否存在
  if (!contact) {
    return <div>联系人数据加载失败或不存在</div>;
  }

  return <EditContactForm contact={contact} />;
}

方案2：catch块中赋值默认值 #

如果你的EditContactForm组件可以接受默认值，直接在catch里给contact赋值符合Contact类型的默认对象：

export default async function Page() {
  let contact: Contact;

  try {
    [contact] = await getContact(104);
  } catch (e: unknown) {
    if (e instanceof Error) {
      console.log(e.message);
    }
    // 填充Contact类型的必填字段作为默认值
    contact = {
      id: 0,
      name: "",
      email: "",
      // 根据你的Contact类型补充其他必填属性
    };
  }

  return <EditContactForm contact={contact} />;
}

你之前的.catch()写法之所以可行，是因为getContact(104).catch(...) || []确保了解构时至少能拿到一个undefined值，contact会被初始化；而原始try-catch代码没有处理失败时的赋值逻辑，才触发了TypeScript的错误。

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