从NFT市场合约获取数据时遇TypeError: contract?.getAddress is not a function错误

错误详情 #

未处理的运行时错误
TypeError: contract?.getAddress is not a function

调用栈 #

useActiveListings
webpack-internal:///./node_modules/@thirdweb-dev/react-core/dist/useTransactions-07d3933d.browser.esm.js (3764:37)

相关代码 #

App.jsx #

import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react";
import "../styles/globals.css";
const chainId = ChainId.Mumbai;
function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider
      activeChain={chainId}
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

index.jsx #

"use-client";

import {
  ConnectWallet,
  useActiveListings,
  useContract,
} from "@thirdweb-dev/react";
import styles from "../styles/Home.module.css";

export default function Home() {
  const contract = useContract(
    "0x74f9073F15D0aa5A9dCF3396df4230f7E453DEaa",
    "marketplace-v3"
  );

  console.log(contract);

  const { data, isLoading } = useActiveListings(contract);
  // console.log(data);

  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Welcome to Thirdweb!</h1>
      <ConnectWallet />
    </main>
  );
}

解决办法 #

• 先判断合约是否加载完成：useContract 是异步钩子，直接传未初始化的合约实例给 useActiveListings 会触发错误。可以采用两种方式处理：

  // 方式1：通过可选链访问实际合约实例
  const { data, isLoading } = useActiveListings(contract?.contract);
  
  // 方式2：等待合约加载完成后再执行后续逻辑
  if (!contract) {
    return <div>加载合约中...</div>;
  }
  const { data, isLoading } = useActiveListings(contract);
  

• 核对SDK版本与教程匹配：如果教程使用的是旧版Thirdweb SDK，当前版本的useContract返回结构可能发生变化。查看当前版本官方文档，确认useContract的返回值格式，比如是否需要从返回对象中提取contract属性。
• 验证合约信息正确性：确保传入useContract的合约地址无误，且marketplace-v3类型与你部署的NFT市场合约类型完全匹配，类型不匹配会导致合约实例初始化失败。

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