NextJS从Firebase取数报错：无法读取undefined的address属性

核心问题原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'address')本质是初始渲染时userData.publicData未定义，或接口定义与实际返回数据不匹配导致类型断言失效。

具体诱因 #

1. 初始状态缺失publicData：用useState({} as IUser)初始化状态，但空对象里没有publicData属性。组件初始渲染时尝试访问userData.publicData.address，此时publicData为undefined，直接访问子属性触发报错——尽管后续fetch到数据会更新状态，但初始渲染的错误已经发生。
2. 接口定义与实际数据不符：如果Firebase返回的部分用户数据中publicData字段不存在（比如用户未填写），但接口定义强制要求publicData是必填对象，类型断言data as IUser会掩盖这个问题，导致运行时出现未定义情况。
3. 缓存数据结构不完整：若缓存的旧数据缺少publicData字段，直接断言为IUser返回也会引发同样错误。

分步解决方案 #

1. 修复初始状态，避免初始渲染报错 #

给useState设置符合IUser接口的完整初始值，确保publicData始终存在：

const [userData, setUserData] = useState<IUser>({
  name: "",
  email: "",
  uid: "",
  profileImageURL: "",
  publicData: {
    phone: "",
    address: ""
  }
});

或者在模板中使用可选链操作符容错未定义情况：

{userData.publicData?.address}

2. 修正接口定义，匹配实际数据结构 #

如果Firebase中publicData是可选字段（部分用户没有该数据），修改接口将其标记为可选：

export default interface IUser {
  name: string;
  email: string;
  uid: string;
  profileImageURL: string;
  publicData?: { // 加?表示该字段可选
    phone: string;
    address: string;
  }
}

若publicData可能为null，则调整类型为：

publicData: { phone: string; address: string; } | null;

3. 优化fetch代码，避免混用await与then #

当前代码混用await和then，可读性差，优化为：

useEffect(() => {
  const fetchData = async () => {
    try {
      setIsLoading(true);
      const data = await fetchUserData(params.id);
      setUserData(data);
      setIsLoading(false);
    } catch (error) {
      console.error('Error fetching data:', error);
      setIsLoading(false); // 出错也要关闭加载状态
    }
  };
  fetchData();
}, [params.id]); // 将params.id加入依赖数组，路由参数变化时重新请求

4. 校验缓存数据完整性 #

在fetchUserData中返回缓存数据前，检查publicData是否存在，避免返回不完整数据：

export const fetchUserData = async (uid: string): Promise<IUser> => {
  const cacheKey = 'userData_' + uid;
  const cachedData = getCache(cacheKey);

  if (cachedData) {
    // 校验缓存数据结构完整性
    if (cachedData.publicData) {
      console.log('Returning cached data:', cachedData);
      return cachedData as IUser;
    } else {
      // 缓存数据不完整，重新请求
      console.log('Cached data incomplete, refetching...');
    }
  }

  const response = await fetch(`https://dev/auth/user?id=${uid}`, {
    method: 'get',
    headers: {
      'Content-type': 'application/json'
    }
  });
  if (!response.ok) {
    throw new Error("Failed to fetch user data");
  }
  const data: IUser = await response.json();
  console.log('Fetched data:', data);
  setCache(cacheKey, data);

  return data;
};

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