如何解决TypeScript错误：Type 'undefined' cannot be used as an index type.ts

错误原因 #

你代码里的fallback是可选属性，类型为string | undefined，当它未传入时是undefined，而TypeScript不允许用undefined作为对象的索引值。另外fallbackImg的设计逻辑也有问题——你想通过fallback参数指定使用哪个备用图，但当前fallbackImg只有noImage一个键且初始值为空，完全没发挥作用。

修复方案 #

我们可以调整逻辑，让fallback直接接收备用图的URL（更符合组件使用直觉），同时处理fallback可能为undefined的情况，避免报错：

import * as React from 'react';

interface ImageProps {
    src: string;
    alt?: string;
    className?: string;
    // 直接让fallback接收备用图地址，可选属性
    fallback?: string;
}

export const Image = (props: ImageProps, ref: React.ForwardedRef<HTMLImageElement>): React.ReactElement => {
    const { src, alt, className, fallback, ...otherProps } = props;    
    // 初始状态为空，或者直接用fallback作为初始值
    const [errFallback, setErrFallback] = React.useState<string>('');

    const errFallbackHandler = () => {
        // 只有当fallback存在时才设置，否则保持空（或者可以加默认备用图兜底）
        if (fallback) {
            setErrFallback(fallback);
        }
        // 如需默认图兜底可改为：setErrFallback(fallback || '/default-no-image.png');
    };

    return (
        <img
            ref={ref}
            alt={alt || ''}
            className={className}
            // 优先用src，加载失败后用errFallback
            src={src || errFallback}
            {...otherProps}
            onError={errFallbackHandler}
        />
    );
};

export default React.forwardRef(Image);

关键修改点 #

• 删掉了冗余的FallbackImage接口，直接传备用图URL更简单直观
• 在errFallbackHandler里增加了fallback的存在性判断，避免使用undefined做索引
• 移除了无用的fallbackImg对象，简化状态逻辑

如果你坚持要通过预设键名管理多个备用图，可以这么修改：

import * as React from 'react';

// 定义所有允许的备用图键名
type FallbackKey = 'noImage' | 'brokenImage';

interface ImageProps {
    src: string;
    alt?: string;
    className?: string;
    // 指定fallback必须是预设键名类型，可选属性
    fallback?: FallbackKey;
}

// 预设备用图地址集合
const fallbackImages: Record<FallbackKey, string> = {
    noImage: '/path/to/no-image.png',
    brokenImage: '/path/to/broken-image.png'
};

export const Image = (props: ImageProps, ref: React.ForwardedRef<HTMLImageElement>): React.ReactElement => {
    const { src, alt, className, fallback, ...otherProps } = props;    
    const [errFallback, setErrFallback] = React.useState<string>('');

    const errFallbackHandler = () => {
        // 有指定fallback则用对应图，否则用默认的noImage
        setErrFallback(fallback ? fallbackImages[fallback] : fallbackImages.noImage);
    };

    return (
        <img
            ref={ref}
            alt={alt || ''}
            className={className}
            src={src || errFallback}
            {...otherProps}
            onError={errFallbackHandler}
        />
    );
};

export default React.forwardRef(Image);

这种方式通过FallbackKey类型约束了fallback的可选值，确保它只能是fallbackImages存在的键，彻底解决索引类型错误。

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