Reactjs TypeError:undefined不是对象（正在计算'；lists.map'；）

我正在尝试使用Firebase执行TODO应用程序。我需要从firebase获取列表。但我面临上述错误。在Firebase中，我添加了“待办事项”和“列表”。列表必须结合一些待办事项。 谁能帮帮我吗？我不擅长这个。 在这里您可以看到我的代码：

App.jsx

import React, { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';

import { get } from './api';
import DBContext from './context/db';

import AppDrawer from "./components/AppDrawer";

import "./App.scss"

export default function App() {
    const [lists, setLists ] = useState([]);
    const [todos, setTodos ] = useState([]);

    useEffect(() => {
        get('lists').then(setLists);
        get('todos').then(setTodos);
    }, []);


    return (
        <DBContext.Provider value={{lists, todos}}>
            <div className="app">
                <AppDrawer
                    lists={lists}
                />


                <AppContent>
                    <Switch>
                        <Route path="/:listId" component={TodoList} />
                    </Switch>
                </AppContent>
            </div>
        </DBContext.Provider>
    );
}

import React，{useState，useffect}来自“React”；
从“react router dom”导入{Switch，Route}；
从“/api”导入{get}；
从“./context/db”导入DBContext；
从“/components/AppDrawer”导入AppDrawer；
导入“/App.scss”
导出默认函数App（）{
const[lists，setLists]=useState（[]）；
const[todos，setTodos]=useState（[]）；
useffect（（）=>{
获取（'list'）。然后（setlist）；
get（'todos'）。然后（setTodos）；
}, []);
返回(
);
}

AppDrawer.jsx

import React from 'react';
import { NavLink } from 'react-router-dom';

import {
    Drawer, DrawerHeader, DrawerContent,Icon,
    List, ListItem, ListItemGraphic, ListItemText, ListDivider,
    ListGroup
} from 'mdc-react';

export default function AppDrawer({ lists }) {

    return (
        <Drawer
            id="app-drawer"
        >
            <DrawerHeader
                title="React Todo"
            />

            <DrawerContent>
                <ListGroup>
                    <List>
                        {[
                           { title: 'Moje konto', icon: 'person', to: '/' },
                           { title: 'Zadania', icon: 'assignment', to: '/tasks' },
                           { title: 'Ważne', icon: 'grade', to: '/important'},
                            
                        ].map(item =>
                            <ListItem
                                key={item.icon}
                                component={NavLink}
                                to={item.to}
                            >
                            </ListItem>
                        )}
                    </List>

                    <ListDivider element="hr" />

                    <List>
                        {lists.map(item =>
                            <ListItem
                                key={item.key}
                                component={NavLink}
                                to={item.id}
                            >
                            </ListItem>
                        )}
                    </List>
                </ListGroup>
            </DrawerContent>
        </Drawer>
    );
}

从“React”导入React；
从'react router dom'导入{NavLink}；
进口{
抽屉，抽屉阅读器，抽屉内容，图标，
列表，列表项，列表项图形，列表项文本，列表分隔符，
列表组
}来自“mdc反应”；
导出默认函数AppDrawer（{lists}）{
返回(
{[
{标题：'Moje konto'，图标：'person'，收件人：'/'}，
{标题：'Zadania'，图标：'assignment'，收件人：'/tasks'}，
{标题：'Ważne'，图标：'grade'，收件人：'/important'}，
].map（项目=>
)}
{lists.map（项=>
)}
);
}

我有一个错误：

---

TypeError:undefined不是对象（评估'lists.map'）

[{title:'Profile'，icon:'person'，to:'/'}，]

创建一个包含两个元素、一个对象和一个未定义的数组。[{title:'Moje konto'，icon:'person'，to:'/'}，{title:'Zadania'，icon:'assignment'，to:'/tasks'}，{title:'Ważne'，icon:'grade'，to:'/important'}我这样做了，但这并没有解决我的问题。