React Router教程加载空联系人时出现TypeError: contact is null问题求助

核心问题1：路由参数大小写不匹配 #

路由配置里的参数定义为contacts/:contactID（驼峰式contactID），但你的loader中使用的是params.contactid（全小写contactid）。React Router的params对象键名严格匹配路由中定义的参数名，导致此处无法获取正确的联系人ID，最终getContact返回null。

修复代码： #

调整loader中的参数名，与路由定义保持一致：

export async function loader({ params }) {
  // 改为params.contactID，匹配路由里的:contactID
  const contact = await getContact(params.contactID);
  return { contact };
}

核心问题2：空联系人的属性访问安全处理 #

即便获取到正确ID，新创建的联系人仅包含id和createdAt字段，没有avatar、first等组件依赖的属性，直接访问contact.avatar会触发Cannot read properties of null/undefined错误。需在组件中添加空值保护逻辑。

修复代码： #

通过默认对象或可选链操作符处理空值情况：

export default function Contact() {
  const { contact } = useLoaderData();
  // 给空联系人设置默认值，避免属性访问报错
  const safeContact = contact || {
    first: "",
    last: "",
    avatar: "https://placekitten.com/g/200/200",
    twitter: "",
    notes: "",
    favorite: false,
  };

  return (
    <div>
      {/* 也可以直接使用可选链：contact?.avatar */}
      <img src={safeContact.avatar} alt={`${safeContact.first} ${safeContact.last}`} />
      <h1>{safeContact.first} {safeContact.last}</h1>
      {/* 其他字段同理处理 */}
    </div>
  );
}

额外验证步骤（可选） #

若仍有问题，可在createContact中添加日志，确认新联系人是否正确写入localforage：

export async function createContact() {
  await fakeNetwork();
  let id = Math.random().toString(36).substring(2, 9);
  let contact = { id, createdAt: Date.now() };
  let contacts = await getContacts();
  contacts.unshift(contact);
  await set(contacts);
  // 验证数据写入结果
  const savedContacts = await localforage.getItem("contacts");
  console.log("已保存联系人列表：", savedContacts);
  return contact;
}

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