配列の戻り値の結果がundefinedになる。

Question

前提・実現したいこと

firestoreのドキュメントからユーザー情報を取得し、その結果を配列で取得したいのですが、
呼び出し元でundefinedが返されます。なぜ取れないのか理由を教えていただけないでしょうか。

以下のように、ドキュメントを取得する定義を行い、

該当のソースコード

export const initGet = async (uid) => {

  const user = await query(collection(db, "users"), where("uid", "==", uid));
  return await getDocs(user).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      let users = [];
      users.push({
        uid: doc.data().uid,
        name: doc.data().name,
        email: doc.data().email,
        image: doc.data().image,
        areaId: doc.data().areaId,
        buisinessId: doc.data().buisinessId,
      });
      console.log(users);　⇐"この時点では配列取得が可能"
      return users;
    });
  });
};

呼び出し先では以下のようにしています。

　const currentUser = useContext(AuthContext);

  useEffect(() => {
    fetch();
  }, [currentUser]);

  //usecontextが取れていない状態でfetchが走らないようdigで分岐を行う
  const fetch = async () => {
    if (dig(currentUser, "currentUser", "uid")) {
      const data = await initGet(currentUser.currentUser.uid);　⇐"undefined"
      await setUsers(data);
    }

Comments

[FKM]

useContextフックで橋渡ししようとしている親コンポーネントのJSXの部分を提示してください。

[tttniaeefe]

以下のように設定しています。
export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);

useEffect(() => {
auth.onAuthStateChanged(setCurrentUser);
}, []);

return (
<AuthContext.Provider value={{ currentUser }}>
　 {children}
</AuthContext.Provider>
);

Answer 1

親コンポーネントからuseContextフックで橋渡しする場合はこれでいいのでは？子コンポーネントで受け皿としてcurrentUserが橋渡しされている状態なので、二重にcurrentUserは不要じゃないかと思われます。

 const fetch = async () => {
　　const { currentUser } = useContext(AuthContext)
　　console.log(currentUser)  //確認するとcurrentUser直下にメンバが代入されるはずです
    if (dig(currentUser, "currentUser", "uid")) {
      const data = await initGet(currentUser.uid);
      await setUsers(data);
    }

JSXの記述は自分も勘違いがあったのでこっちの環境でも検証してみました。質問文で正しいですが、二重リテラルではなく

value={ //ここはjsxのルール上のオブジェクトリテラル（変数代入用）
 { currentUser } //ここはオブジェクトのリテラル（代入された変数）
}

いわばこのような状態になっているので。

Comments

[tttniaeefe]

currenuUserはオブジェクトリテラルなので、{{ currentUser }}としています。
currentuser中身は以下です。
```
▼{currentUser: UserImpl}
　▼currentUser: UserImpl
　　displayName: "sample name"
　　...
　　uid: "eh2bvoqr0kbyR8wBbvdB1NU88QL2"
```
ちなみにcurrentUser.currentUser.uidの値は問題なく取れています。

[tttniaeefe]

以下の記事を参考にしながら、currentUserの中身を直下表示できるようになりました。
https://reffect.co.jp/react/react-firebase-auth#Cotext
⇛6 ユーザ情報の共有(Cotext)

valueに渡す前に以下のようにしておかないと、表示ができませんでした。
const value = {
currentUser,
};
<AuthContext.Provider value={value}>...

しかし、未だundefinedが返ってきます。。

[tttniaeefe]

回答いただきありがとうございました。

Answer 2

return文に問題があることが発覚しました。

export const initGet = async (uid) => {
  let users = [];
  const user = await query(collection(db, "users"), where("uid", "==", uid));
  await getDocs(user).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      users.push({
        uid: doc.data().uid,
        name: doc.data().name,
        email: doc.data().email,
        image: doc.data().image,
        areaId: doc.data().areaId,
        buisinessId: doc.data().buisinessId,
      });
      console.log(users);
    });
  });
  return users;
};