如何使用图像将 addDoc 与 Firebase 结合使用？

Question

这就是我目前所拥有的。我正在使用 OMDB API，我正在尝试对其进行设置，以便当有人喜欢某部电影时，会在 firestore 的“收藏夹”集合中创建一个文档，其中包含电影的标题、海报API 及其发布年份。当我尝试收藏一部电影时，我收到一条错误消息，指出类型错误：无法读取未定义的属性（读取“toString”）和错误：FIRESTORE (9.18.0) INTERNAL ASSERTION FAILED：意外状态。我是一名新开发人员，我真的在努力解决这个问题。任何建议或解决方案将不胜感激！

从“反应”中导入反应，{useState，useEffect}； import { getFirestore, collection, addDoc, deleteDoc } from "firebase/firestore"; 从“../icons/heart_toggle_light”导入 Light_Heart； 从“../icons/heart_toggle_dark”导入 Dark_Heart；

const DEFAULT_PLACEHOLDER_IMAGE = “https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg”；

const 电影 = ({ 电影 }) => {

const title = `${movie.Title}`;

const poster =
    movie.Poster === "N/A" ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster;

const year = `${movie.Year}`;

const db = getFirestore();

const collectionRef = collection(db, "favorites");

const [favoriteStatus, setFavoriteStatus] = useState(useEffect(() => {
    localStorage.getItem("favoriteStatus") || "notFavorite"
    }, [])
);

const addToFavorites = async () => {
    await addDoc(collectionRef, {
        ...movie,
        Name: title,
        Poster: poster,
        Year: year
    })
};

const deleteFromFavorites = async () => {
    await deleteDoc(collectionRef, {
        ...movie,
    })
};

const toggleFavorite = () => {
    if (favoriteStatus === "notFavorite") {
        setFavoriteStatus("favorite");
        addToFavorites();
    } else {
        setFavoriteStatus("notFavorite");
        deleteFromFavorites();
    }
};

return (
    <div className="movie">
        <h2>{movie.Title}</h2>
        <div>
            <img
                width="200"
                alt={`The movie titled: ${movie.Title}`}
                src={poster}
            />
        </div>
        <button onClick={toggleFavorite}>
            {(() => {
                if (favoriteStatus === "favorite") {
                    return <Dark_Heart />
                } else {
                    return <Light_Heart />
                }
            })()}
        </button>
        <p>({movie.Year})</p>
    </div>
);

};

导出默认电影；

Most of the solutions I've tried so far have had to do with changing the way the different variables are added by the addDoc function. I get the feeling it has something to do with firebase not expecting an image, or the type of data is not what it is expecting.