在TypeScript组件中使用React JS Hook遇TS2554错误的求助

问题原因 #

TypeScript无法自动推断自定义Hook返回数组的精确类型，会把renderErrorToast和setErrorText推断为联合类型。当你调用renderErrorToast()时，TS误以为可能是需要传入参数的setErrorText，因此抛出TS2554错误。

修复方案 #

给自定义Hook添加明确的类型标注，同时指定useState的泛型类型，让TypeScript能正确识别每个返回值的类型：

修改后的useErrorDialog Hook（TypeScript版本）

import { useState, Dispatch, SetStateAction } from 'react'
import Snackbar from "@mui/material/Snackbar";
import MuiAlert from "@mui/material/Alert";

// 明确标注Hook的返回类型为元组
export const useErrorDialog = (): [() => JSX.Element, Dispatch<SetStateAction<string | null>>] => {
    // 指定useState的泛型，明确errorText的类型是字符串或null
    const [errorText, setErrorText] = useState<string | null>(null)

    const renderErrorToast = () => {
        return (
            <Snackbar
                open={errorText !== null}
                onClose={() => setErrorText(null)}
            >
                <MuiAlert 
                    elevation={6} 
                    variant="filled"
                    severity="error"
                >
                    {errorText}
                </MuiAlert>
            </Snackbar>
        )
    }

    return [renderErrorToast, setErrorText]
}

使用Hook的组件调整

注意React组件必须返回单个根元素，所以需要用Fragment包裹内容：

function Instructions() {
    const [renderErrorToast, setErrorText] = useErrorDialog()

    return (
        <>
            {renderErrorToast()}
            {/* 这里可以添加你的其他组件内容 */}
        </>
    )
}

关键说明 #

• 给useState添加<string | null>泛型，明确状态的允许类型，避免TS默认推断为null单一类型。
• 给Hook返回值标注元组类型，让TS清楚知道数组第一个元素是无参返回JSX的函数，第二个是状态更新函数，彻底解决类型混淆问题。

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