在TypeScript中解构useContext中的值时出错

Question

我对TypeScript有点陌生，但我喜欢它。

当我试图在React中使用useContext解构我的Context时，我得到一些错误，我不知道为什么我得到。

错误:Property 'nftContract' does not exist on type 'Web3 | null'.ts(2339)

上下文文件

export interface Web3 {
gameContract: Contract | string;
nftContract: Contract | string;
provider: Provider | string;
account: string;
etherBalance: string;
setWeb3?: React.Dispatch<React.SetStateAction<Web3>>;
}
export const Web3Context = createContext<Web3 | null>(null);
export const Web3Provider: React.FC = ({ children }) => {
const [
{ gameContract, nftContract, provider, account, etherBalance },
setWeb3
] = useState<Web3>({
gameContract: '',
nftContract: '',
provider: '',
account: '',
etherBalance: ''
});
return (
<Web3Context.Provider
value={{
provider,
gameContract,
nftContract,
account,
etherBalance,
setWeb3
}}
>
{children}
</Web3Context.Provider>
);

文件消费Context (Context已经被正确包装在主索引/app文件中)

const MintNFTForm = () => {
// Property 'nftContract' does not exist on type 'Web3 | null'.ts(2339)
const { nftContract } = useContext(Web3Context);
}

任何帮助，谢谢!

Answer 1

仅在检查不为null后才解构值:

const MintNFTForm = () => {
const ctxt = useContext(Web3Context);
if (ctxt == null) return <div>No context yet</div>;
// `ctxt` is now guaranteed to not be `null`, safe to destructure
const { nftContract } = ctxt;
}

代码将上下文的值初始化为null，并声明它的类型可以是null，因此任何引用它的代码都必须考虑到这种情况:

export const Web3Context = createContext<Web3 | null>(null);