在React中出现了"Property 'ethereum' does not exist on type 'Window & typeof globalThis'"错误。

Question

我正在React中遇到错误：

'Window & typeof globalThis'类型上不存在属性“ethereum”

这是导致问题的代码行：

import { ethers } from 'ethers'

const provider = new ethers.providers.Web3Provider(window.ethereum);

有任何想法是怎么回事吗？

- Boris

Answer 1

使用any作为类型是作弊的。使用"any"只会消除错误，但不会显示可用的属性。

import { MetaMaskInpageProvider } from "@metamask/providers";

declare global {
  interface Window{
    ethereum?:MetaMaskInpageProvider
  }
}

- Yilmaz

---

在MetaMask的文档中提到，“其他兼容以太坊的浏览器”也可以拥有Window.ethereum。也许将类型设置为“MetaMaskInpageProvider”会使其仅与MetaMask兼容？ - Terry Windwalker

据我所知，唯一注入“以太坊”（ethereum）的浏览器是“勇敢浏览器”（Brave），但它并不是一个常用的浏览器。@TerryWindwalker - Yilmaz

Answer 2

在src文件夹中创建 react-app-env.d.ts 文件，并添加以下脚本：

/// <reference types="react-scripts" />

interface Window {
    ethereum: any
}

- Boris

---

同样适用于 vite-env.d.ts 文件。 - DengSihan

Answer 3

在我的 src/react-app-env.d.ts 文件中，我正在使用

/// <reference types="react-scripts" />
import { ExternalProvider } from "@ethersproject/providers";

declare global {
  interface Window {
    ethereum?: ExternalProvider;
  }
}

注意@ethersproject/providers是ethers依赖项，因此无需安装。

然后我还添加了一个src/hooks/useMetaMask.ts文件，其中包含useMetaMask hook，将提供者强制转换为MetaMask提供者类型。如果需要添加MetaMask监听器，则此功能可能很有用。

import type { MetaMaskInpageProvider } from "@metamask/providers";

export const useMetaMask = () => {
  const ethereum = global?.window?.ethereum;
  if (!ethereum || !ethereum.isMetaMask) return;
  return ethereum as unknown as MetaMaskInpageProvider;
};

- Gianluca Casati

---

只是想补充一下。如果你正在使用 Vite，请浏览到 src/vite-env.d.ts 并添加以下内容（注意第一行的装饰器）：/// import { ExternalProvider } from "@ethersproject/providers"; declare global { interface Window { ethereum?: ExternalProvider; } } - Abhik Banerjee

注意：您需要安装 ethers 才能使其正常工作！ - Abhik Banerjee

Answer 4

对于我的NextJs应用程序，我在根目录下创建了一个名为web3.d.ts的文件，其中包含以下代码：

import { MetaMaskInpageProvider } from "@metamask/providers";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

确保你的 tsconfig.json 文件在 include 中包含了上述文件。

- stuckoverflow