React TypeScript下拉组件报Object is possibly undefined如何解决

两处报错的核心原因是TypeScript对可选属性的严格校验：

• options.map报错：TProduct接口中options被定义为可选属性options?: []，可选属性默认可能为undefined，直接调用map方法会触发类型校验错误，同时你对options的类型定义错误，[]在TS中代表空数组类型，无法容纳实际的下拉选项数据。
• selectedOption.title报错：一方面TOption接口中title是可选属性，且useState初始化传入的初始值是空对象{}，空对象下的title本身为undefined，直接访问会触发校验。

此外你的代码还存在额外的逻辑错误：selectedOption === ""的判断完全不成立，selectedOption是对象类型不可能等于空字符串；map遍历中使用了未定义的index变量；selectedOption === option的引用对比逻辑不可靠，容易出现匹配错误。

1. 修正类型定义 #

interface TProduct {
    title?: string;
    // 调整options类型为TOption数组，支持传入可选
    options?: TOption[];
    // 明确getDropDownValue类型
    getDropDownValue?: (option: TOption) => void;
}

// 建议下拉选项的核心属性设为必填，避免后续使用场景下可以保留可选
interface TOption {
    title: string;
    value: string;
    id: string | number;
}

2. 给可选属性加默认值兜底 #

// 解构props时给可选参数默认值，避免undefined场景
const { title, options = [], getDropDownValue = () => {} } = props;
// 调整selectedOption的类型，支持null初始值更符合空选中的场景
const [selectedOption, setSelectedOption] = useState<TOption | null>(null);

3. 修正渲染逻辑 #

return (
    <div
        className="base-select"
        ref={dropdownRef}
        onClick={e => {
            setVisibility(!visibility);
        }}
    >
        <div className="selected-option">
            <span
                title={selectedOption ? selectedOption.title : title}
            >
                {selectedOption 
                    ? selectedOption.title.length <= 20
                        ? selectedOption.title
                        : `${selectedOption.title.slice(0, 20)}`
                    : title
                }
            </span>
        </div>
        {visibility && (
            <div className="options">
                <ul>
                    {options.map((option, index) => (
                        <li
                            key={option.id ?? index}
                            className={selectedOption?.id === option.id ? "active-option" : ''}
                            onClick={() => {
                                setSelectedOption(option);
                                getDropDownValue(option);
                            }}
                        >
                            {option.title}
                        </li>
                    ))}
                </ul>
            </div>
        )}
    </div>
);

如果确实需要保留属性为可选，可直接使用TS可选链运算符?.访问属性，比如selectedOption?.title，即可直接规避undefined场景下会自动跳过undefined场景的属性访问，不会触发类型错误。

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