使用detectEthereumProvider后出现MetaMaskEthereumProvider无request属性错误

错误原因 #

@metamask/detect-provider 默认返回的类型定义不够完整，TypeScript无法识别request方法的存在，导致类型校验报错。

解决方案 #

方案1：导入MetaMask官方类型定义 #

1. 安装MetaMask官方类型包：

npm install @metamask/providers --save-dev

2. 修改代码并指定正确类型：

import detectEthereumProvider from "@metamask/detect-provider";
import type { MetaMaskInpageProvider } from "@metamask/providers";

export const requestMetamaskAccount = async (): Promise<string | undefined> => {
  // 断言provider为MetaMask官方定义的类型
  const provider = await detectEthereumProvider() as MetaMaskInpageProvider | null;

  if (provider) {
    try {
      // 请求账户权限
      await provider.request({
        method: "wallet_requestPermissions",
        params: [{ eth_accounts: {} }],
      });
      // 请求授权账户
      const accounts = await provider.request({
        method: "eth_requestAccounts",
      });
      return accounts?.[0];
    } catch (error) {
      console.error("MetaMask连接失败:", error);
      return undefined;
    }
  }
  console.error("未检测到MetaMask钱包");
  return undefined;
};

方案2：手动定义类型（无需额外安装依赖） #

如果不想新增依赖，可以手动声明包含request方法的核心类型：

import detectEthereumProvider from "@metamask/detect-provider";

// 手动定义MetaMask provider的核心接口
interface MetaMaskProvider {
  request: (options: { method: string; params?: unknown[] }) => Promise<unknown>;
}

export const requestMetamaskAccount = async (): Promise<string | undefined> => {
  const provider = await detectEthereumProvider() as MetaMaskProvider | null;

  if (provider) {
    try {
      await provider.request({
        method: "wallet_requestPermissions",
        params: [{ eth_accounts: {} }],
      });
      const accounts = await provider.request({
        method: "eth_requestAccounts",
      });
      return accounts?.[0] as string;
    } catch (error) {
      console.error("MetaMask连接失败:", error);
      return undefined;
    }
  }
  console.error("未检测到MetaMask钱包");
  return undefined;
};

补充说明 #

• 之前直接用window.ethereum能正常工作，是因为你手动扩展了Window接口，指定了ethereum的类型为ethers的ExternalProvider，而detectEthereumProvider返回的类型没有自动关联这个定义，所以需要手动指定类型。
• 加入try/catch可以捕获用户拒绝授权等异常情况，提升代码健壮性。

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