[React] Error solving - Uncaught (in promise) FirebaseError: Function addDoc() called with invalid data.

리액트 숙련주에서는 Redux와 Firebase를 연결하여 데이터를 저장하고 읽고 쓰고 업데이트하는 것을 배웠다.

그런데 추가하는 과정에서 에러가 발생했다.

Uncaught (in promise) FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field example in document dictionary/SXfUFpNn1VnZDT4kuyBO

//dictionary.js
import { db } from "../../firebase";
import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc } from 'firebase/firestore'

const ADD = "dictionary/ADD";

//Initial State 
const initialState = {
    list: [],
};

//Action Creaters
export function addWord(word){
    return {type: ADD, word};
}

//MiddelWares
export const addWordFB = (word) => {
    return async function (dispatch) {
        const docRef = await addDoc(collection(db, "dictionary"), word);
        const _word = {id: docRef.id, ...word};
        dispatch(addWord(_word));
    };
};

//Reducer
export default function reducer(state = initialState, action = {} ){
    switch (action.type) {
         // ADD
        case "dictionary/ADD": {
            const new_word_list = [
                {
                    id: action.word.id, 
                    done: false, 
                    word: action.word.word, 
                    desc: action.word.desc, 
                    example: action.word.example,
                }
            ];
            const new_list = {...state.list, new_word_list};
            return {list: new_list};
        }
        default:  return state;
    }
}

//Addword.js
import React, { useRef } from "react";
import styled from "styled-components";
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
import { addWordFB } from "./redux/modules/dictionary";
import Button from '@material-ui/core/Button';

const AddWord = () => {
    const history = useHistory();
    const dispatch = useDispatch();
    
    const word = useRef("");
    const desc = useRef("");
    const example = useRef("");

    const addWord = () => {
        if (word.current.value === "" ) {
            alert("단어는 필수 입력란입니다.");
            return;
          }
        dispatch(
            addWordFB({
                word: word.current.value,
                desc: desc.current.value,
                example: example.current.valeu,
                done: false,
            })
        );
        history.goBack();
    }

    return (
        <Wrap>
            <DictWrap>
                <AddWrap>
                    <h3>단어 추가하기</h3>
                    <AddDetail>
                            <p>WORD <Input required placeholder="단어" ref={word} /></p>
                            <p>DESCRIPTION <Input  placeholder="설명" ref={desc}/></p>
                            <p>EXAMPLE <Input placeholder="예문" ref={example}/></p>
                    </AddDetail>
                    <Button onClick={addWord} 
                            variant="outlined"
                            style={{margin: "20px auto 5px auto", display: "block", border: "1px solid rgb(25, 118, 210)"}}>Add</Button>
                </AddWrap>
            </DictWrap>
        </Wrap>

    )
}

어디서 에러가 났을가...

1. 스펠링 에러...
2. 배열이 아니고 객체로 return

case "dictionary/ADD": {
            const new_word_list = [
                {
                    id: action.word.id, 
                    done: false, 
                    word: action.word.word, 
                    desc: action.word.desc, 
                    example: action.word.example,
                }
            ];
            **const new_list = [...state.list, new_word_list];**
            return {list: new_list};
        }

const addWord = () => {
        if (word.current.value === "" ) {
            alert("단어는 필수 입력란입니다.");
            return;
          }
        dispatch(
            addWordFB({
                word: word.current.value,
                desc: desc.current.value,
	 		    **example: example.current.value,**
                done: false,
            })
        );
        history.goBack();
    }

아 이걸 왜 ..ㅎㅎ 물어봤을까?
죽어라구냥