Next.js结合Redux Toolkit报错：无法读取undefined的title属性

你的错误出在组件中对useSelector返回值的解构处理上，具体分析如下：

核心问题 #

getTodoState函数的作用是从Redux根状态中返回todos切片的状态——也就是你定义的单个TodoState对象（包含id、title等属性）。但你在组件中错误地对这个返回值进行了解构：

const { todos } = useSelector(getTodoState);

这相当于从TodoState对象中提取名为todos的属性，但你的TodoState接口里根本没有这个属性，所以变量todos会变成undefined，后续访问todos.title自然就触发了Cannot read properties of undefined的错误。

修复步骤 #

修改组件中的状态获取代码，有两种可选方式：

方式一：直接获取完整的Todo对象 #

const TodoContainer = () => {
    const dispatch = useDispatch();
    // 直接接收getTodoState返回的Todo对象，不需要解构
    const todo = useSelector(getTodoState);

    return (
        <>
            {/* ... 其他代码 ... */}
            <div>{todo.title}</div>
            {/* ... 其他代码 ... */}
        </>
    )
}

方式二：直接解构Todo对象的属性 #

如果只需要title，可以直接在useSelector后解构需要的属性：

const TodoContainer = () => {
    const dispatch = useDispatch();
    // 直接解构出title属性
    const { title } = useSelector(getTodoState);

    return (
        <>
            {/* ... 其他代码 ... */}
            <div>{title}</div>
            {/* ... 其他代码 ... */}
        </>
    )
}

额外优化建议 #

为了类型安全，建议使用你在store.ts中导出的useSelector，而不是直接从react-redux导入：

// 替换组件中的导入语句
import { init, getTodoState} from '@/data/todoSlice'
import { useDispatch, useSelector } from '@/path/to/store' // 改为你的store文件实际路径

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