类型错误：无法读取未定义的属性（从 firebase 获取数据）

Question

在我的 NextJS 应用程序中显示数据时遇到一些问题。

我正在从 Firebase 获取数据，界面如下所示：

export default interface IUser {
  name: string;
  email: string;
  uid: string;
  profileImageURL: string;
  publicData: {
    phone: string;
    address: string;
  }
}

当我访问 users/[id]/page.tsx 时，我正在获取数据：

const [userData, setUserData] = useState({} as IUser);

    useEffect(() => {

      const fetchData = async () => {
        try {
          setIsLoading(true);
          const IUser = await fetchUserData(params.id)
          .then((data) => {
            setUserData(data)
            setIsLoading(false);
          })
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      };
    
      fetchData();
    }, []);

当我尝试显示数据时，

publicData

中没有的任何内容都会毫无问题地显示，即姓名、电子邮件等。当我尝试访问和显示

userData.publicData.address

时，我收到错误

TypeError: Cannot read properties of undefined (reading 'address')

不太确定这里的问题是什么，因为控制台日志确实显示数据没有问题，认为它可能与用户界面有关。

预先感谢您提供的所有提示和解决方案。

更新 添加 firebase 结构的屏幕截图

还添加了 fetchUserData 的代码

import IUser from "../interfaces/User";
import { getCache, setCache } from "./cache";

export const fetchUserData = async (uid: string): Promise<IUser> => {

    const cacheKey = 'userData_' + uid;
    const cachedData = getCache(cacheKey);

  if (cachedData) {
    console.log('Returning cached data:', cachedData);
    return cachedData as IUser;
  }

    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;
};

Answer 1

发生这种情况是因为无论您在何处尝试使用显示数据或使用数据。您尚未检查天气数据是否可用。获取数据需要一些时间。因此，您必须添加条件，在使用数据之前，您应该检查是否获取了天气数据。例如：在react渲染时你可以这样做

   userData?.length > 0 && userData?.map(user => {
           //what ever data you are trying to render
});

不要忘记使用“？”在点之前，否则您将看到错误屏幕。至少你不会看到错误。 希望它能帮助你。 谢谢