TypeScript报错：类型'DataContextProps | null'不存在属性'account'

你的问题源于useData返回的类型是DataContextProps | null，TypeScript不允许直接访问可能为null的值的属性。以下是两种可行修复方案：

方案一：在组件内处理null情况 #

直接在Header组件中先判断context是否初始化完成，再解构属性：

// Header.tsx
import Identicon from "identicon";
import React, { useEffect, useState } from "react";
import { useData } from "../../contexts/DataContext";

function Header() {
  const data = useData();
  
  // 若context未加载完成，返回加载状态或占位组件
  if (!data) {
    return <div>Loading...</div>;
  }

  const { account } = data;
  const [identiconData, setIdenticonData] = useState<string | undefined>();

  useEffect(() => {
    if (account !== "0x0") {
      setIdenticonData(new Identicon(account, 200).toString());
    }
  }, [account]);

  return (
    <div>
      {identiconData && <img src={`data:image/png;base64,${identiconData}`} alt="Identicon" />}
      <span>{account}</span>
    </div>
  );
}
export default Header;

方案二：优化useData钩子（推荐） #

修改DataContext.tsx中的useData钩子，确保它仅能在DataProvider内部使用，否则抛出错误，同时让返回类型严格为DataContextProps：

// context/DataContext.tsx
// ... 其他原有代码保持不变

export const useData = () => {
  const context = useContext(DataContext);
  if (!context) {
    throw new Error("useData 必须在 DataProvider 组件内部使用");
  }
  return context;
};

修改后，Header组件可直接解构属性，无需再处理null：

// Header.tsx
const { account } = useData();

额外注意 #

确保你的应用根组件已被DataProvider包裹，否则方案二中的钩子会抛出错误。示例：

// App.tsx
import { DataProvider } from './context/DataContext';

function App() {
  return (
    <DataProvider>
      <Header />
      {/* 其他业务组件 */}
    </DataProvider>
  );
}

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