类型错误：未定义不是对象（评估“lists.map”）

Question

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

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>
    );
}

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>
    );
}

我有这个错误：

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