

[firebaseの記事](https://firebase.google.com/docs/auth/web/manage-
users?hl=ja%E3%80%80)  
のupdateProfileを使って、登録したnameを更新したいと考えています。  
ですが、下記のエラーが出てしまいます。

[code]

    Unhandled Runtime Error
    TypeError: Cannot destructure property 'displayName' of 'undefined' as it is undefined.
    
    Call Stack
    updateProfile
    node_modules/@firebase/auth/dist/esm2017/index-58473f72.js (5433:37)
    HTMLUnknownElement.callCallback
    node_modules/react-dom/cjs/react-dom.development.js (4164:0)
    Object.invokeGuardedCallbackDev
    node_modules/react-dom/cjs/react-dom.development.js (4213:0)
    invokeGuardedCallback
    node_modules/react-dom/cjs/react-dom.development.js (4277:0)
    invokeGuardedCallbackAndCatchFirstError
    node_modules/react-dom/cjs/react-dom.development.js (4291:0)
    executeDispatch
    node_modules/react-dom/cjs/react-dom.development.js (9041:0)
    processDispatchQueueItemsInOrder
    node_modules/react-dom/cjs/react-dom.development.js (9073:0)
    processDispatchQueue
    node_modules/react-dom/cjs/react-dom.development.js (9086:0)
    dispatchEventsForPlugins
    node_modules/react-dom/cjs/react-dom.development.js (9097:0)
    eval
    node_modules/react-dom/cjs/react-dom.development.js (9288:0)
    batchedUpdates$1
    node_modules/react-dom/cjs/react-dom.development.js (26140:0)
    batchedUpdates
    node_modules/react-dom/cjs/react-dom.development.js (3991:0)
    dispatchEventForPluginEventSystem
    node_modules/react-dom/cjs/react-dom.development.js (9287:0)
    dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
    node_modules/react-dom/cjs/react-dom.development.js (6465:0)
    dispatchEvent
    node_modules/react-dom/cjs/react-dom.development.js (6457:0)
    dispatchDiscreteEvent
    node_modules/react-dom/cjs/react-dom.development.js (6430:0)
    
[/code]

と出てしまいます。userの情報は取得できており、  
ユーザー写真やemailや名前は表示できているのですが、なぜか更新もできません。  
入力欄は、値が一応受け取っている動きをしているので、  
updateProfile(user, {の書き方が悪い感じでしょうか。  
よろしくお願いします。

[code]

    profile.js
    import React from "react";
    import { useEffect, useState } from "react";
    import Link from "next/link";
    import { app, database } from "../../firebaseConfig";
    import {
      collection,
      addDoc,
      getDocs,
      doc,
      updateDoc,
      deleteDoc,
      Firestore,
    } from "firebase/firestore";
    import { useRouter } from "next/router";
    import { getAuth, updateProfile } from "firebase/auth";
    import { MuiNavbar } from "../../layouts/MuiNavbar";
    import Button from "@mui/material/Button";
    import Stack from "@mui/material/Stack";
    import Box from "@mui/material/Box";
    import TextField from "@mui/material/TextField";
    import Card from "@mui/material/Card";
    import CardActions from "@mui/material/CardActions";
    import CardContent from "@mui/material/CardContent";
    import CardMedia from "@mui/material/CardMedia";
    import Typography from "@mui/material/Typography";
    import Grid from "@material-ui/core/Grid";
    import Head from "next/head";
    
    export default function Profile() {
      const [ID, setID] = useState(null);
      const [title, setTitle] = useState("");
      const [context, setContext] = useState("");
      const auth = getAuth();
      const user = auth.currentUser;
      const [photoURL, setPhotoURL] = useState();
      const [displayName, setDisplayName] = useState(user?.displayName);
      const [image, setImage] = useState();
      let router = useRouter();
      const databaseRef = collection(database, "CRUD DATA");
      const [firedata, setFiredata] = useState([]);
    
      console.log(user);
      console.log(displayName);
    
      if (user) {
        updateProfile(user, {
          displayName: displayName,
        })
          .then(() => {
            setDisplayName("");
            // setPhotoURL("");
            router.push("/profile");
          })
          .catch((error) => {
            console.error(error);
          });
      }
     
      return (
        <div>
          <Head>
            <title>漫画考察.net</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <MuiNavbar />
          <h2 className="m-5">プロフィール</h2>
          <p className="m-5">
            ユーザー画像： {user && <img src={user.photoURL} />}
          </p>
          <p className="m-5">名前： {user && <span>{user.displayName}</span>}</p>
          <p className="m-5">自己紹介：</p>
          <p className="m-5">
            メールアドレス： {user && <span>{user.email}</span>}
          </p>
    
          <p className="m-5">過去の投稿</p>
    
          <p className="m-5">いいねした投稿：</p>
    
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              id="outlined-basic"
              label="名前"
              variant="outlined"
              value={displayName || ""}
              onChange={(event) => setDisplayName(event.target.value)}
            />
          </Box>
    
          <Button variant="outlined" className="m-5" onClick={updateProfile}>
            更新する
          </Button>
    
          <Button variant="outlined" className="m-5" href="">
            <Link href="/profile/edit">更新</Link>
          </Button>
          <Button variant="outlined" className="m-5" href="/profile/edit">
            メールアドレスを変更する
          </Button>
          <Button variant="outlined" className="m-5" href="/profile/edit">
            パスワードを変更する
          </Button>
        </div>
      );
    }
    
[/code]


CC BY-SA 4.0
2022-07-05T02:47:43.263
89759
2022-07-05T02:47:43.263
52921
question
reactjs next.js
next.jsでfirebase認証のプロフィールを更新できない