React TS传props报{walletAddress:string}无法赋值为string解决方法

算力阿峰

2026-8-29

错误原因

React函数组件的第一个入参统一为props对象，所有在JSX标签上传递的属性，都会被封装为这个对象的键值对传入组件，不会单独拆分单个属性作为入参。
你当前的代码将组件入参直接标注为string类型，等于告诉TypeScript该组件接收的props整体是字符串格式，但实际传入的是结构为{ walletAddress: string }的对象，因此触发ts(2322)类型不匹配错误，你打印入参看到对象结构也和这个逻辑完全一致。

修复方法

父组件传参代码无需修改，只需要调整Address组件的定义即可，两种常用写法如下：

普通函数组件写法（推荐）

// 定义组件接收的props类型
type AddressProps = {
  walletAddress: string
}

// 从props对象中解构出需要使用的字段
const Address = ({ walletAddress }: AddressProps) => {
  return (
    <div className="mb-10">{walletAddress}</div>
  )
}

使用React内置FC泛型写法

import type { FC } from 'react'

type AddressProps = {
  walletAddress: string
}

const Address: FC<AddressProps> = ({ walletAddress }) => {
  return (
    <div className="mb-10">{walletAddress}</div>
  )
}