React使用微软PowerBI Developer Samples运行报TS7053错误求助

错误原因 #

该TS7053报错的核心是reportRef的类型为联合类型：((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement>，其中仅React.RefObject类型存在current属性，函数式ref不存在该属性，TypeScript无法自动识别ref的具体类型，因此禁止直接访问current字段。

修复方案 #

方案1：类型守卫收窄（推荐，无类型安全风险） #

将原报错行的代码替换为以下逻辑：

let reportContainer: HTMLDivElement | null = null;
// 类型守卫判断是否为RefObject类型
if ('current' in reportRef) {
  reportContainer = reportRef.current ?? null;
}
// 后续的reportContainer使用逻辑保持不变

方案2：类型断言（适合确认ref为useRef创建的场景） #

如果可以确定reportRef是通过React.useRef<HTMLDivElement>(null)创建的、不是函数式ref，可以直接用类型断言简化代码：

reportContainer = (reportRef as React.RefObject<HTMLDivElement>).current;

额外说明 #

官方示例未触发报错通常是因为其项目TS配置关闭了严格类型检查规则，本地项目开启strict: true配置后就会触发该类类型校验提示。

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