TypeScript调用返回指定类型的React Hook报属性不存在错误如何解决？

第一个报错原因 #

• 你在App组件中没有正确调用自定义Hook：const geoLocation = Test 这行代码是将Test函数本身赋值给了geoLocation变量，而非调用Test函数拿到返回值。此时geoLocation的类型是() => GeoLocationData（函数类型），自然不存在isGeoLocationDataSet这个属于GeoLocationData类型的属性。

第二个报错原因 #

• 箭头函数使用()包裹函数体是「隐式返回对象」的语法糖，仅适用于直接返回对象字面量的场景，比如const getObj = () => ({a:1})。你将包含const声明、return语句的函数逻辑用()包裹后，TS会将内部的代码解析为对象的键值对：把const识别为对象属性名，后面的语句识别为属性值，因此返回的对象不符合GeoLocationData的类型定义，触发报错。

修复方案 #

1. 先恢复自定义Hook的正确定义，使用{}包裹函数体（你最开始的Hook定义本身是正确的，不需要加()包裹）：

import { useState, useEffect } from 'react'

interface GeoLocationData {
    isGeoLocationDataSet: boolean
    lat: string
    lon: string
    errorCode: number,
    errorMsg: string
}

export const Test = (): GeoLocationData => {
    const [geoLocationData, setGeolocationData] = useState<GeoLocationData>({
        isGeoLocationDataSet: false,
        lat: '',
        lon: '',
        errorCode: 0,
        errorMsg: ''
    });

    // 业务逻辑实现
    return geoLocationData
}

2. 在App组件中正确调用自定义Hook，添加括号执行函数拿到返回值：

import React from 'react';
import './App.css';
import { Test} from './hooks/Test';

function App() {
  // 这里加()调用Hook即可
  const geoLocation = Test()
  return (
    <div className="App">
      <body className="App-body">
        <p>
          {geoLocation.isGeoLocationDataSet
            ? JSON.stringify(geoLocation)
            : "No"}
        </p>
      </body>
    </div>
  );
}

export default App;

可选优化建议 #

React官方规定自定义Hook必须以use为前缀命名，否则ESLint的Hook规则校验会触发警告，建议将Test重命名为useGeoLocation等符合命名规范的名称。

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