使用ThirdWeb与React构建NFT市场时_app.tsx类型错误求助

错误原因 #

你遇到的类型错误核心是：当前使用的ThirdwebWeb3Provider组件的Props类型未包含children属性，说明该组件不支持直接包裹子元素。这大概率是因为@3rdweb/hooks包的版本迭代导致API用法变更，或是组件本身的设计就需要配合其他Provider使用。

解决方案1：切换到官方推荐的@3rdweb/react包（推荐） #

@3rdweb/hooks已被官方废弃，现在推荐使用更完善的@3rdweb/react包，它的Provider组件原生支持包裹子元素，配置也更简洁：

1. 卸载旧包并安装新依赖：

npm uninstall @3rdweb/hooks
npm install @3rdweb/react ethers

2. 修改_app.tsx代码：

import '../styles/globals.css'
import { ThirdwebProvider } from '@3rdweb/react'
import { ChainId } from '@3rdweb/sdk'

type Props = {
  children?: React.ReactNode
};

function MyApp(props: Props) {
  // ChainId.Rinkeby 对应链ID 4，直接使用枚举值更清晰
  return (
    <ThirdwebProvider desiredChainId={ChainId.Rinkeby}>
      {props.children}
    </ThirdwebProvider>
  )
}

export default MyApp

该方案默认集成了MetaMask等主流钱包连接器，无需手动配置connectors参数。

解决方案2：继续使用@3rdweb/hooks的兼容写法 #

如果必须保留@3rdweb/hooks，需要配合@web3-react/core的Web3ReactProvider来包裹应用，因为ThirdwebWeb3Provider仅负责配置连接规则，不渲染子元素：

1. 确保安装了依赖：

npm install @web3-react/core

2. 修改_app.tsx代码：

import '../styles/globals.css'
import { ThirdwebWeb3Provider, useWeb3 } from '@3rdweb/hooks'
import { Web3ReactProvider } from '@web3-react/core'

const supportedChainIds = [4]
const connectors = {
  injected: {},
}

type Props = {
  children?: React.ReactNode
};

function MyApp(props: Props) {
  return (
    <Web3ReactProvider getLibrary={useWeb3}>
      <ThirdwebWeb3Provider
        supportedChainIds={supportedChainIds}
        connectors={connectors}
      />
      {props.children}
    </Web3ReactProvider>
  )
}

export default MyApp

这里将ThirdwebWeb3Provider和应用内容都放在Web3ReactProvider下，由后者负责上下文传递。

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