React TypeScript类型错误：'string | string[]'无法分配指定类型

我是React完全新手，但熟悉原生JavaScript，跟着YouTube教程学习时遇到了TypeScript类型错误。虽然代码能正常运行，但App.tsx里有两个类型错误，不知道原因和优化方法。

我想让代码更动态，把标题和列表项放在同一个数组里，避免手动修改标题，但这种写法触发了类型错误。

代码片段 #

components/ListGroup.tsx #

import { useState } from "react";

interface ListProps {
    items: string[];
    heading: string;
}

function ListGroup({ items, heading }: ListProps) {
    // 控制元素状态
    const [selectedIndex, setSelectedIndex] = useState(-1);

    const handleClick = (index: number) => {
        // 将selectedIndex设置为点击项的索引，更新外观（添加'active'类）
        setSelectedIndex(index);
    };

    const noItem = () => {
        return (
            // true && x 返回x；false && x 返回false
            items.length === 0 && (
                <div className="card">
                    <div className="card-body bg-danger text-white">
                        No results found.
                    </div>
                </div>
            )
        );
    };

    return (
        <>
            <h1>{heading}</h1>
            {noItem()}
            <ul className="list-group">
                {/* JSX中不能使用for循环，因此通过map将items转为HTML元素 */}
                {items.map((item, index) => (
                    <li
                        className={
                            selectedIndex === index
                                ? "list-group-item active"
                                : "list-group-item"
                        }
                        key={item}
                        onClick={() => handleClick(index)}
                    >
                        {item}
                    </li>
                ))}
            </ul>
        </>
    );
}

export default ListGroup;

App.tsx #

import ListGroup from "./components/ListGroup";

function App() {
    let items = ["Cities", ["New York", "London", "Tokyo", "Paris"]];

    return (
        <div>
            <ListGroup items={items[1]} heading={items[0]} />
        </div>
    );
}

export default App;

错误信息 #

Type 'string | string[]' is not assignable to type 'string[]' [Ln 9, Col 24].
  Type 'string' is not assignable to type 'string[]'.

Type 'string | string[]' is not assignable to type 'string' [Ln 9, Col 41].
  Type 'string[]' is not assignable to type 'string'.

我尝试修改ListProps里的items类型为string，但错误依然存在：

Type 'string | string[]' is not assignable to type 'string[]' [Ln 9, Col 24].
  Type 'string' is not assignable to type 'string'.

补充：浏览器控制台无错误，代码能正常渲染。

1. 快速修复：类型断言 #

直接给TypeScript明确信号，告诉它你确定items[0]是字符串，items[1]是字符串数组：

function App() {
    let items = ["Cities", ["New York", "London", "Tokyo", "Paris"]];

    return (
        <div>
            <ListGroup 
                items={items[1] as string[]} 
                heading={items[0] as string} 
            />
        </div>
    );
}

2. 规范写法：自定义类型 #

给你的标题+列表结构定义一个专属类型，让TypeScript自动识别正确类型：

// 明确第一个元素是标题（字符串），第二个是列表项数组
type ListData = [string, string[]];

function App() {
    let items: ListData = ["Cities", ["New York", "London", "Tokyo", "Paris"]];

    return (
        <div>
            <ListGroup items={items[1]} heading={items[0]} />
        </div>
    );
}

这种方式最稳妥，TypeScript能完全理解你的数据结构，不会再报错。

3. 更清晰的写法：用对象存储 #

其实用对象来存标题和列表比嵌套数组更直观，可读性拉满：

function App() {
    let listData = {
        heading: "Cities",
        items: ["New York", "London", "Tokyo", "Paris"]
    };

    return (
        <div>
            <ListGroup {...listData} />
        </div>
    );
}

不仅类型完美匹配，后续改数据也不容易搞错结构，维护起来更省心。

错误原因解释 #

你定义的items数组，TypeScript会自动推断它的类型是(string | string[])[]——也就是说数组里的每个元素既可能是字符串，也可能是字符串数组。当你取items[0]和items[1]时，TypeScript无法确定它们的具体类型，所以会抛出类型不匹配的错误，尽管运行时它们确实是正确的类型。

通过明确类型或者类型断言，就能让TypeScript确认你使用的变量类型符合ListProps的要求，从而消除错误。

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